我们在Ext.Window
内有一个网格面板。 gridpanel
的滚动条自动向上移动,同时滚动它无法正常工作,当Ext.Window
展开时,网格面板不会展开。我想有些房产必须设置好吗?在gridpanel中使用autoExpandColumn
会解决问题吗?
extWin=new Ext.Window({
title:"Locate Managed Object",items:[new Ext.grid.GridPanel({
title: "Managed Elements",
region: "center",
height:250,
width:500, renderTo:"tree-id",
viewConfig: {forceFit: true},
store: store,
sm: new GeoExt.grid.FeatureSelectionModel({selectControlelect}),
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{header:"Managed Elements",dataIndex:"fid"}
]
})
})]
});
extWin.show();
我已将layout:'fit'
添加到此处,并且展开工作正常,但滚动功能尚未完成。如果我在任何时候出错,请更正。
答案 0 :(得分:0)
这是工作示例。如果您遇到任何问题,请告诉我。
诀窍是,layout
属性。只需设置容器的布局属性fit
(在这种情况下容器是窗口),并且不为网格提供任何大小属性,如宽度,高度。
Sencha Fiddle - GridPanel in Window
Ext.onReady(function(){
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 50,
buffered: true,
purgePageCount: 0,
model: 'Employee',
proxy: {
type: 'memory'
}
});
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 400,
closable: false,
collapsible: true,
layout: {
type: 'fit'
},
items: {
xtype: 'grid',
border: false,
store: store,
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
columns: [
{xtype:'rownumberer',width:40,sortable:false},
{text: 'Name',flex:1,sortable:true,dataIndex:'name'},
{text: 'Rating',width:125,sortable:true,dataIndex:'rating'},
{text: 'Salary',width:125,sortable:true,dataIndex:'salary',align:'right',renderer:Ext.util.Format.usMoney}
]}
}).show();
var data = createFakeData(500),
ln = data.length,
records = [],
i = 0;
for (; i < ln; i++) {
records.push(Ext.ModelManager.create(data[i], 'Employee'));
}
store.loadData(records);
});