Extjs3笔记 fbar

在项目中会遇到在grid右下角显示合计之类的显示。

之前使用过的方式：

1.用width强制顶过去。

2.利用css来控制。

 

弊端：

利用第一种方式：导致调整窗口大小时会导致合计不能根据窗体的大小变化来自适应。

利用第二种方式：通过css设置。float: right;   会导致如果本页面增加了一个控件以后就得去修改id。

 

翻看了api，发现有一个fbar。尝试了一下：果然好使。

默认靠右展示。

var store = new Ext.data.JsonStore({
    url: 'xxx',
    root: 'Table',
    totalProperty: 'result',
    fields: [
            { name: 'Test1' },
            { name: 'Test2' }
            ]
});
new Ext.grid.GridPanel({
    autoWidth: true,
    height: 290,
    store: store,
    enableHdMenu: false,
    enableColumnMove: false,
    enableColumnHide: false,
    frame: true,
    cm: new Ext.grid.ColumnModel([
                { header: "Test1", width: 100, align: 'left', dataIndex: 'Test1' },
                { header: "Test2", width: 80, align: 'left', dataIndex: 'Test2' }
            ]),
    buttonAlign: 'left', //用于fbar显示正常。
    fbar: [{
        xtype: 'label',
        html: '<p style="color:red">注：提示文字靠左显示，需要写上buttonAlign属性，否则即使把文字描述写了->前也无效</p>'
    }, '->', {
        xtype: 'label',
        text: '合计数量：'
    }, {
        xtype: 'textfield',
        id: 'TotalQuantity',
        readOnly: true,
        width: 100
    }, {
        xtype: 'label',
        text: '总合计(元)：'
    }, {
        xtype: 'textfield',
        id: 'TotalAmount',
        readOnly: true,
        width: 100
    }],
    sm: new Ext.grid.CheckboxSelectionModel({ singleSelect: false }),