Question

Ext中Viewport布局Grid的高度问题

我使用viewport进行了上左中右的布局，左边固定了宽度。
在左边里面放置一个Grid，此Grid高度自己设置固定的，要求该Grid的高度自适应。(PS:表格自带的自适应高度在此处无效)

另外，表格里面的分页控件，pagingToolbar，由于宽度受限，如何将该工具栏里面的内容隔行显示？

• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏10（财富值+成长值）

Answer 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 '<span style="color:green;">' + val + '</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},

pctChangeRenderer: function(val){
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
});

追问

哥，有效果图么，这代码我复制过来，没效果。
我是初学者，就引用了ext-all还有语言文件

追答

官方API http://docs.extjs.com/
还有我的博客 http://blog.csdn.net/ci2011ss/article/details/19910467