Вот рабочий пример. Если у вас возникнут какие-либо проблемы, дайте мне знать.
Хитрость в том, что свойство layout
. Просто установите свойство макета контейнера fit
(в данном случае контейнер - это окно) и не задавайте никаких свойств размера для сетки, таких как ширина, высота.
Sencha Fiddle — GridPanel в окне
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);
});
person
Oğuz Çelikdemir
schedule
11.04.2014