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

时间：2012-02-21 05:03:26

标签： extjs

我有以下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 &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>

1 个答案:

答案 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
        ]
    });
});​
相关问题
最新问题