ExtJS: How to use alias/xtype to refer to other components

Question

I am new in ExtJS and having in this fiddle a simple application (which still not working) that bind data from a store to a Grid view. My store look like:

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

And I would like to call this store inside of my View but I dont know how to do that, my View looks like:

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

One way that I found in the Internet is that I can create a store variable and put that variable inside of the View, like:

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

And then inside the View: store: bookstore .

But I would like to ask that how can I use alias or xtype in this case instead of creating this store variable? I tried by putting inside of the Store: alias: 'store.bookstore' and then inside the View I called: store: 'bookstore', but it didnt work. I also tried by using: xtype: 'store.bookstore' and then store: 'bookstore', but still the same result, not working.

And can you please explain me what is the difference between alias and xtype, in which case should I use alias, which case should I use xtype? Thank you!

Check below answer how to add store to grid – Yogen Darji Aug 18 '17 at 13:49 — Yogen Darji, Aug 18 '17 at 13:49

Yogen Darji · Accepted Answer · 2017-08-18T13:55:11.900

Add storeId in your store config and also set stores:[yourStore] in 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()
            });
        }
    });
})

It works. Thank you so much yogen. I saw that you added also in the application the line: stores: ['ExtApp.store.BookStore']. What is the difference if I define the store like what you added, and if I use 'requires'?, something like requires: ['ExtApp.store.BookStore'] — Ock, Aug 18 '17 at 14:26
@Sonn Basically `requires` use for if you want to add other view before loading that component and `stores` to load store. — Yogen Darji, Aug 18 '17 at 14:30
@Sonn If you add the store to the `stores` configuration your app.js, an instance is created. If you add it to the requires, the file is loaded. That's the difference. For stores which you use once, you assign a storeId and add them to app.js, if you reuse them (more than one instance) you use requires. — Alexander, Aug 18 '17 at 16:39

ExtJS: How to use alias/xtype to refer to other components

1 Answers1