1. 首页
  2. 问答
  3. 如何使用extjs将网格添加到选项卡？

如何使用extjs将网格添加到选项卡？

2012-02-21 57 views
3

我有以下创建2个选项卡和网格的extjs代码。如何使用extjs将网格添加到选项卡？

我如何才能在选项卡中添加网格？

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' 
      } 
      }] 

    }); 



});

//电网

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 &amp; 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>

来源

2012-02-21 user244394

+0

您有意调用Ext.onReady两次，并使用相同的名称创建2个全局变量？ – Geronimo 2012-02-21 05:18:23

回答

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 
     ] 
    }); 
});​

来源

2012-02-21 09:28:12 Krzysztof

相关问题

 相关问题