Question

EXTJS中如何调整Grid的长度，根据浏览器（谷歌）自动调整？

var simple_Grid = new Ext.grid.GridPanel({
store:store,
cm: columns,
sm: new Ext.grid.RowSelectionModel({singleSelcet:true}),
viewConfig:{
forceFit:true,
columnsText:"显示的列",
sortAscText:"升序",
sortDescText:"降序"
},
loadMask:{msg:"数据加载中...."},
collapsible: true,
titleCollapse:true,
animCollapse: false,
columnLines: true,
autoWidth: true,
height: 370,
autoScroll: true,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '第 {0} 条到 {1} 条,共 {2} 条',
emptyMsg: "无记录"
})
});

Answer 1

一般在EXT中 , 会把组件都放到viewport中 , viewport 是一个自动适应浏览去整个区域的一个容器...

可以把其他的组件都放到viewport中...

比如你上面的grid..可以放到viewport中 , 然后viewport设置 layout = fit 就可以...

具体可以去查看一下API.

//下面代码是直接从API的例子中复制的..可以看一下
Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});