ext的gridpanel的bbar为何消失

Question

/*  
 * 假日信息维护表单面板，继承自Extjs的FormPanel类  
 */  
  
holidayInfo = Ext.extend(Ext.FormPanel,{    /**  
     * 基本属性  
     */  
     holidayInfoKeywordText: null,   
     holidayInfoTopToolBar: null,   
     holidayInfoSm: null,   
     holidayInfoCm: null,   
     holidayInfoGridPanel: null,   
     holidayInfoWin: null,   
     holidayInfoFp: null,    //定义构造器   
     constructor: function(){   
           
         // 添加记录行   
         var holidayType = new Ext.form.TextField({   
             id:'holidayType',   
             name : 'holidayType',   
             fieldLabel: '假期类型'  
         });   
         var startDate = new Ext.form.DateField ({   
             id:'startDate',   
             name : 'startDate',   
             fieldLabel: '开始时间'  
         });   
         var endDate = new Ext.form.DateField ({   
             id:'endDate',   
             name : 'endDate',   
             fieldLabel: '结束时间'  
         });   
//定义页面上方的工具条   
        this.holidayInfoKeywordText = new Ext.form.TextField({   
            name : 'keyword',   
            anchor : '95%',   
            maxLength : 25   
        });   
        this.holidayInfoTopToolBar = new Ext.Toolbar({   
             items: [{   
                        id: 'delButton',   
                        text: '删除',   
                        iconCls : 'deleteicon',   
                        tooltip: '删除记录',   
                        handler: this.onDelHolidayInfo,   
                        scope: this  
                    },'-',{   
                        id: 'saveButton',   
                        text: '保存',   
                        iconCls : 'detailicon',   
                        tooltip: '保存',    
                        handler: this.onSave,   
                        scope: this  
                    },'->','Search: ',this.holidayInfoKeywordText,   
                    {   
                        id: 'searchHolidayInfoKeywordTextButton',   
                        text: '查询',   
                        iconCls : 'serchopenroomrecord',   
                        pressed: true,   
                        tooltip: '查询记录',   
                        scope: this  
                    }   
            ]   
        });   
        //定义静态数据   
        var holidayInfoData = [   
            ['春节',  '2011-02-01'], ['春节',  '2011-02-02'], ['春节',  '2011-02-03'],   
            ['春节',  '2011-02-04'], ['春节',  '2011-02-04'], ['春节',  '2011-02-06'],   
            ['春节',  '2011-02-07'], ['春节',  '2011-04-01'], ['春节',  '2011-04-02'],   
            ['春节',  '2011-04-05']   
        ];   
        var store = new Ext.data.Store({   
            proxy: new Ext.ux.data.PagingMemoryProxy(holidayInfoData),   
            remoteSort:true,   
            reader: new Ext.data.ArrayReader({   
                fields: [   
                    {name: 'holidayType'},   
                    {name: 'holidayDate'}   
                ]   
            })   
        });   
        store.load({params:{start:0, limit:5}});   
        //创建checkbox   
        this.holidayInfoSm = new Ext.grid.CheckboxSelectionModel();   
        //创建列模型   
        this.holidayInfoCm = new Ext.grid.ColumnModel([   
                new Ext.grid.RowNumberer(),// 获得行号   
                this.holidayInfoSm,//checkbox   
                {   
                    id:'holidayType',   
                    header: "假期类型",    
                    width: 500,   
                    sortable: true,   
                    align: "center",   
                    dataIndex: 'holidayType'  
                },   
                {   
                    id:'holidayDate',   
                    header: "假日日期",    
                    width: 500,    
                    sortable: true,   
                    align: "center",   
                    dataIndex: 'holidayDate',   
                    editor: new Ext.form.DateField({   
                        format : 'Y-m-d'  
                    })   
                }   
            ]);   
        this.gridTitle = "<div>" +   
                            "<div style='float:left;'>" +   
                                "假日信息维护" +   
                            "</div>" +   
                            "<div style='float:right;'>" +   
                                "货币单位：万元&nbsp;&nbsp;&nbsp;&nbsp;" +   
                                "记录总数：" + store.getTotalCount() +    
                            "</div>" +   
                        "</div>";   
        //创建查询列表   
        this.holidayInfoGridPanel = new Ext.grid.GridPanel({   
            store: store,   
            cm: this.holidayInfoCm,   
            sm: this.holidayInfoSm,   
            loadMask: true,   
            autoScroll: true,   
            border: false,   
            height: 600,   
            collapsible: true,//设置面板可收缩   
            title: this.gridTitle,   
            tbar: this.holidayInfoTopToolBar,   
            bbar: new Ext.PagingToolbar({   
                pageSize: 15,   
                store: store,   
                displayInfo: true,   
                plugins: new Ext.ux.ProgressBarPager()   
            })   
        });   
        holidayInfo.superclass.constructor.call(this, {   
            labelAlign: "right",   
            collapsible: true,   
            autoScroll: true,   
            bodyStyle: "padding:0 0",   
            frame: true,   
            layout: "fit",   
            items: [{   
                layout: "column",   
                items: [{   
                    columnWidth: .3,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ holidayType ]   
                },{   
                    columnWidth: .35,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ startDate ]   
                },{   
                    columnWidth: .35,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ endDate ]   
                },{   
                    columnWidth: 1,   
                    layout: 'fit',   
                    items: [ this.holidayInfoGridPanel ]   
                }]   
            }]   
        });   
     },   
     //定义删除操作   
     onDelHolidayInfo: function(){   
         //判断是否有选中记录   
         if(this.holidayInfoGridPanel.selModel.hasSelection()){   
             //获取被选中的记录数组   
             var records = this.holidayInfoGridPanel.selModel.getSelections();   
             //遍历记录数组   
             for(var i = 0, r; r = records[i]; i++){   
                 this.holidayInfoGridPanel.store.remove(r);   
             }   
         } else {   
             Ext.Msg.alert("系统提示","请选择记录进行删除！");   
         }   
     },   
     //保存功能函数   
     onSave: function(){   
         Ext.Msg.alert("系统提示","保存成功");   
         this.closeWin();   
     }   
});
该代码在1280*1024 分辨率下，页面展示还算正常 ，调整到1024*800分辨率下，下方的bbar就消失了，既没有垂直滚动条也没有翻页功能了，我对比了一下，发现是因为在formpanel有普通textfield这样的对象和 GridPanel 共存造成的，如果只是存在GridPanel的话，页面则没有任何问题，请教该怎么办呢？

Answer 1

是高度的问题 改成了这样//创建查询列表
this.holidayInfoGridPanel = new Ext.grid.GridPanel({
store: store,
cm: this.holidayInfoCm,
sm: this.holidayInfoSm,
loadMask: true,
autoScroll: true,
autoHeight: true,
border: false,
collapsible: true,//设置面板可收缩
title: gridTitle,
tbar: this.holidayInfoTopToolBar,
//tbar: ['假期类型',qjlx],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});

holidayInfo.superclass.constructor.call(this, {
frame: true,
autoScroll: true,
collapsible: true,
labelAlign: "right",
bodyStyle: "padding:0 0",
items: [{
layout: "column",
items: [{
columnWidth: .3,
layout: 'form',
defaultType: 'textfield',
items: [ holidayType ]
},{
columnWidth: .35,
layout: 'form',
defaultType: 'textfield',
items: [ startDate ]
},{
columnWidth: .35,
layout: 'form',
defaultType: 'textfield',
items: [ endDate ]
}]
},this.holidayInfoGridPanel]
});
不过水平的滚动条还是不出现

Answer 2

不行 用了 autoWidth： true 没效果， 写成 width： 600， gridPanel只显示一部分，靠右边接近三分之一的panel都没有显示

Answer 3

哦，估计是你的column布局的问题。
,{   
                    columnWidth: 1,   //这里不能为1  用.1或大些
                    layout: 'fit',   
                    items: [ this.holidayInfoGridPanel ]   
                }]   

Answer 4

这样的效果和width：600 的效果差不多啊 没用。。

Answer 5

holidayInfo.superclass.constructor.call(this, {   
            labelAlign: "right",   
            collapsible: true,   
            autoScroll: true,   
            bodyStyle: "padding:0 0",   
            frame: true,   
            layout: "fit",   
            items: [{   
                layout: "column",   
                items: [{   
                    columnWidth: .3,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ holidayType ]   
                },{   
                    columnWidth: .35,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ startDate ]   
                },{   
                    columnWidth: .35,   
                    layout: 'form',   
                    defaultType: 'textfield',   
                    items: [ endDate ]   
                },{   
                    columnWidth: 1,   
                    layout: 'fit',   
                    items: [ this.holidayInfoGridPanel ]   
                }]   
            }]   
        });   
你这样布局是不是想3个文本框在一行，grid在他们下方？

Answer 6

items: [{
            layout: "column",
            items: [{
                columnWidth: .3,
                layout: 'form',
                defaultType: 'textfield',
                items: { xtype: "textfield", width: 100, fieldLabel: "123" }
            }, {
                columnWidth: .35,
                layout: 'form',
                defaultType: 'textfield',
                items: { xtype: "textfield", width: 100, fieldLabel: "234" }
            }, {
                columnWidth: .35,
                layout: 'form',
                defaultType: 'textfield',
                items: { xtype: "textfield", width: 100, fieldLabel: "345" }
            }]
            }, {
                layout: 'fit',
                items: { xtype: "textfield", width: 100, fieldLabel: "123" }
            }]

Answer 7

holidayInfo.superclass.constructor.call(this, {
frame: true,
autoScroll: true,
collapsible: true,
labelAlign: "right",
bodyStyle: "padding:0 0",
items: [{
layout: "column",
items: [{
columnWidth: .3,
layout: 'form',
defaultType: 'textfield',
items: [ holidayType ]
},{
columnWidth: .35,
layout: 'form',
defaultType: 'textfield',
items: [ startDate ]
},{
columnWidth: .35,
layout: 'form',
defaultType: 'textfield',
items: [ endDate ]
}]
},this.holidayInfoGridPanel]
});
我已经这样写了 也是不行

Answer 8

holidayInfo.superclass.constructor.call(this, {
            frame: true,
            autoScroll: true,
            collapsible: true,
            labelAlign: "right",
            bodyStyle: "padding:0 0",
            items: [{
                layout: "column",
                items: [{
                    columnWidth: .3,
                    layout: 'form',
                    defaultType: 'textfield',
                    items: [ holidayType ]
                },{
                    columnWidth: .35,
                    layout: 'form',
                    defaultType: 'textfield',
                    items: [ startDate ]
                },{
                    columnWidth: .35,
                    layout: 'form',
                    defaultType: 'textfield',
                    items: [ endDate ]
                }]
            },this.holidayInfoGridPanel]
        });