我的基本问题是，我有一个包含3个网格的页面，所有页面都有分页工具栏。页面加载时所有网格渲染。页面加载时，3个工具栏中只有1个可以正常工作。其他2个不显示页码，所有按钮都显示为灰色。我已经尝试了所有我能想到的东西，但是如果它们都填充在页面加载上，那么只有1个可以工作。如果它们单独渲染，例如点击页面上的按钮，工具栏就可以完美地工作。
还有其他人有这个问题并解决了吗？
答案 0 :(得分：0)
页面上的单个窗口中的多个网格和多个页面工具栏Extjs中的加载
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
]
});
var userStore1 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
]
});
var userStore2 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' },
]
});
Ext.create('Ext.window.Window', {
height: 600,
width: 400,
xtype: 'panel',
layout: 'fit',
title:'Multiple Grid and Multiple Toolbar in single Window on page Load',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout: 'fit',
items: [
{
xtype: 'grid',
store: userStore1,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore1,
dock: 'bottom',
displayInfo: true,
},
]
},
{
xtype: 'panel',
region: 'center',
items: [
{
xtype: 'grid',
store: userStore2,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore2,
dock: 'bottom',
displayInfo: true,
}]
},
{
xtype: 'panel',
region: 'south',
items: [
{
xtype: 'grid',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
}],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore,
dock: 'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});