你的位置:首页 > Java教程

[Java教程]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 >注:提示文字靠左显示,需要写上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 }),