我有以下extjs代码，可以创建2个标签和一个网格。
如何在标签中添加网格？
Ext.require('Ext.tab.*');
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
//标签
Ext.onReady(function(){
Ext.create('Ext.tab.Panel',{
renderTo:'tabs2',
width: 600,
height: 250,
plain: true,
defaults :{
autoScroll: true,
bodyPadding: 10
},
items:[{
title:'Foo'
},
{
title:'Bar',
tabConfig: {
title:'Custom title',
tooltip: 'A button tooltip'
}
}]
});
});
// grid
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width: 540,
height: 200
});
});
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width: 540,
height: 200
});
});
XML sheldon2.xml
<?xml version="1.0" encoding="utf-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2006-06-28">
<OperationRequest>
<HTTPHeaders>
<Header Name="UserAgent"
Value="Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Avant Browser; Avant Browser; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 1.1.4322; Media Center PC 4.0; InfoPath.2)"></Header>
</HTTPHeaders>
<RequestId>18CZWZFXKSV8F601AGMF</RequestId>
<Arguments>
<Argument Name="Service" Value="AWSECommerceService"></Argument>
<Argument Name="AssociateTag" Value="ws"></Argument>
<Argument Name="SearchIndex" Value="Books"></Argument>
<Argument Name="Author" Value="Sidney Sheldon"></Argument>
<Argument Name="SubscriptionId" Value="1A7XKHR5BYD0WPJVQEG2"></Argument>
<Argument Name="Version" Value="2006-06-28"></Argument>
<Argument Name="Operation" Value="ItemSearch"></Argument>
</Arguments>
<RequestProcessingTime>1.05041599273682</RequestProcessingTime>
</OperationRequest>
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>Sidney Sheldon</Author>
<SearchIndex>Books</SearchIndex>
</ItemSearchRequest>
</Request>
<TotalResults>203</TotalResults>
<TotalPages>21</TotalPages>
<Item>
<ASIN>0446355453</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446355453%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446355453%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Master of the Game</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446613657</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446613657%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446613657%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446357421</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446357421%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357421%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>If Tomorrow Comes</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446607207</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446607207%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446607207%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Vision</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Tell Me Your Dreams</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446357448</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446357448%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446357448%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Bloodline</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446532673</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446532673%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446532673%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Other Side of Me</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446356573</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446356573%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446356573%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>A Stranger in the Mirror</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0060198346</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0060198346%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0060198346%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>William Morrow & Company</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Sky Is Falling</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446354732</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446354732%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446354732%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Nothing Lasts Forever</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446341916</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446341916%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446341916%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>The Naked Face</Title>
</ItemAttributes>
</Item>
</Items>
</ItemSearchResponse>
答案 0 :(得分：4)
如果要将网格添加到容器，则不应渲染网格。基本上你应该创建TabPanel并添加2个项目。如果添加网格或其他任何内容没有区别。
示例代码：
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store1 = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-1.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}
});
// create the Data Store
var store2 = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}
});
// create the grid
var grid1 = Ext.create('Ext.grid.Panel', {
store: store1,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
title: 'Grid1'
});
// create the grid
var grid2 = Ext.create('Ext.grid.Panel', {
store: store2,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
title: 'Grid2'
});
Ext.create('Ext.TabPanel', {
renderTo: Ext.getBody(),
items: [
grid1, grid2
]
});
});