ext3.1 关于bbar

Question

在examples\test-case-2b的index页面中对引入的js，grid-configs.js进行修改，增加了bbar，结果本来应该在底部显示的东西，却跑到了上部运行。。
修改了examples\test-case-2b\resources下的grid-configs.js文件
var myData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],            
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];/**
 * Custom function used for column renderer
 * @param {Object} val
 */
function change(val){    if(val > 0){
        return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}/**
 * Custom function used for column renderer
 * @param {Object} val
 */
function pctChange(val){    if(val > 0){
        return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}// create the data store
var store = new Ext.data.ArrayStore({    fields: [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});// manually load local data
store.loadData(myData);// There is only 1 grid config. var bbar = new Ext.PagingToolbar( {
pageSize :10,
store :store,
displayInfo :true,
displayMsg :'显示第{0}条到{1}条记录，一共{2}条',
emptyMsg :'没有记录'
});
var gridConfigs = new Ext.grid.GridPanel( {

title :'用户信息',
height :430,
trackMouseOver :false,
loadMask : {
msg :'正在加载数据，请稍后.....'
},
ds :store,
   columns: [
      {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
      {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
      {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
      {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
      {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
   ], bbar :bbar

});
效果如下：请赐教，谢谢。

Answer 1

还有是把鼠标放在浮出的bbar上点击几下，bbar又会跑回底部去了。 
十分不解。

Answer 2

再补充一下。。Firefox不会出现上面的情况，好像Firefox刷新了一遍，但是ie会出现这种情况

Answer 3

       OK，验证了一下.  可以回复。
     最近公司框架换了,所以我也在学Ext,在过程中也遇到了和楼主一样的问题,经过一段时间的摸索。竟然不小心被我找到了答案.
    其实处理办法很简单,那就是别把底部的bar写在gird上. 可以在gird外面套一层panel然后将bbar和tbar写在外面的pannel层上. 
国际惯例,贴代码：    //创建可编辑Grid对象
    grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        sm: sm2,
        //设置有边框
        frame: true,
        //显示加载图标
        loadMask: true,
        height: 400,
        width: 800,
        clicksToEdit: 1
    });
    
var dataPanel = new Ext.Panel({
    style: 'padding:0px 0px 0px 0px',
    region: 'center',
    title: '信息',
    layout: 'fit',
    autoScroll: true,
    //设置有边框
    frame: false,
    closable: true,
    // 工具栏
    tbar: [
            removeMenu,
            sepeator,
            refreshMenu,
            sepeator,
            exportMenu,
            '->',
            HighFilter
         ],
    bbar: pageBar,
    items: grid
});