Question

我是ExtJS的新手，并且在this fiddle中有一个简单的应用程序（仍然无效）将数据从商店绑定到网格视图。我的商店看起来像：

Ext.define('ExtApp.store.BookStore',{
        extend: 'Ext.data.Store',
        model: 'ExtApp.model.BookModel',
        fields: ['title', 'author', 'price', 'qty'],
        data: [....some data.....]
});

我想在我的View中调用这个商店，但我不知道该怎么做，我的View看起来像：

Ext.define('ExtApp.view.BookView',{
        extend: 'Ext.grid.Panel',
        alias: 'widget.booklist',
        title: 'Book List',
        store: **WHAT SHOULD I PUT HERE**
});

我在互联网上发现的一种方法是我可以创建一个商店变量并将该变量放在View中，如：

var bookstore = Ext.create('ExtApp.store.BookStore');
bookstore.load();

然后在视图中store: bookstore。

但我想问一下，在这种情况下如何使用别名或xtype而不是创建此存储变量？我尝试放入商店内部：alias: 'store.bookstore'，然后在我调用的视图中调用：store: 'bookstore'，但它没有用。我还尝试使用：xtype: 'store.bookstore'然后使用store: 'bookstore'，但结果仍然相同，无效。

你能否解释一下别名和xtype之间的区别是什么，在哪种情况下我应该使用别名，我应该使用xtype？谢谢！

Answer 1

在商店配置中添加storeId，并在app.js中设置stores:[yourStore]

sencha fiddle

Extjs alias vs xtype

Ext.onReady(function(){

    Ext.define('ExtApp.model.BookModel',{
        extend: 'Ext.data.Model',
        fields: [
            {name: 'title', type: 'string'},
            {name: 'author', type: 'string'},
            {name: 'price', type: 'int'},
            {name: 'qty', type: 'int'}
        ]
    });

    Ext.define('ExtApp.store.BookStore',{
        extend: 'Ext.data.Store',
        alias: 'store.bookstore',
        storeId :'bookstore',
        model: 'ExtApp.model.BookModel',
        fields: ['title', 'author', 'price', 'qty'],
        data: [
            { title: 'JDBC, Servlet and JSP',
             author: 'Santosh Kumar', price: 300, qty : 12000 },
            { title: 'Head First Java',
             author: 'Kathy Sierra', price: 550, qty : 2500 },
            { title: 'Java SCJP Certification',
             author: 'Khalid Mughal', price: 650, qty : 5500 },
            { title: 'Spring and Hinernate',
             author: 'Santosh Kumar', price: 350, qty : 2500 },
            { title: 'Mastering C++',
             author: 'K. R. Venugopal', price: 400, qty : 1200 }
        ]
    });


    Ext.define('ExtApp.view.BookView',{
        extend: 'Ext.grid.Panel',
        alias: 'widget.booklist',
        title: 'Book List',
        store: 'bookstore',
        initComponent: function(){
            this.tbar = [{
                text: 'Add Book',
                action: 'add',
                iconCls: 'book-add'
            }];

            this.columns = [
                {
                    header: 'Title',
                    dataIndex: 'title',
                    flex: 1
                },
                {
                    header: 'Author',
                    dataIndex: 'author'
                },
                {
                    header: 'Price',
                    dataIndex: 'price',
                    width: 60
                },
                {
                    header: 'Quantity',
                    dataIndex: 'qty',
                    width: 80
                }
            ];
            this.callParent(arguments);
        }
    });



    Ext.application({
        name:'ExtApp',
        stores: [
        'ExtApp.store.BookStore'
    ],
        launch: function(){
            Ext.widget('booklist',{
                width: 800,
                height: 300,
                renderTo: Ext.getBody()
            });
        }
    });
})

ExtJS：如何使用alias / xtype来引用其他组件

1 个答案: