ExtJS的：如何使用別名/的xtype指其他組件

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

而且我想打電話給我查看裏面這家店，但我不知道該怎麼做，我的看法是這樣的：我發現

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

的一種方式在互聯網，我可以創建存儲變量，把該變量視圖內，如：

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

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() 
      }); 
     } 
    }); 
})