Ext中Viewport布局Grid的高度问题

2025-05-13 12:09:44
推荐回答(1个)
回答1:

grid 中的 layout配置了吗?

Ext.define('KitchenSink.view.grid.ProgressBarPager', {
extend: 'Ext.grid.Panel',

requires: [
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.ProgressBarPager',
'KitchenSink.model.Company'
],
xtype: 'progress-bar-pager',
height: 320,
frame: true,
title: 'Progress Bar Pager',

initComponent: function() {
this.width = 650;

var store = new Ext.data.Store({
model: KitchenSink.model.Company,
remoteSort: true,
pageSize: 10,
proxy: {
type: 'memory',
enablePaging: true,
data: KitchenSink.data.DataSets.company,
reader: {
type: 'array'
}
}
});

Ext.apply(this, {
store: store,
columns: [{
text: 'Company',
sortable: true,
dataIndex: 'company',
flex: 1
},{
text: 'Price',
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price',
width: 75
},{
text: 'Change',
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change',
width: 80
},{
text: '% Change',
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange',
width: 100
},{
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 115,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}],
bbar: {
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
}
});
this.callParent();
},

afterRender: function(){
this.callParent(arguments);
this.getStore().load();
},

changeRenderer: function(val) {
if (val > 0) {
return '' + val + '';
} else if(val < 0) {
return '' + val + '';
}
return val;
},

pctChangeRenderer: function(val){
if (val > 0) {
return '' + val + '%';
} else if(val < 0) {
return '' + val + '%';
}
return val;
}
});