javascript - Ext JS - 将面板绑定(bind)到数据存储的最佳方式

Question

我是 Ext JS 的新手，注意到网格/树可以绑定(bind)到数据源(商店)的两种方式:

1. Ext.data.StoreManager.lookup('someStoreId');
2. Ext.getStore('someStoreId');

Ext.getStore 只是 StoreManager.lookup 的简写吗？两者之间是否存在性能差异，或者使用一个优于另一个被认为是最佳实践？

Answer 1

是的，它们是同一个东西，你叫哪个并不重要，getStore 是为了方便输入，it calls StoreManager .

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext-method-getStore

Shortcut to Ext.data.StoreManager.lookup.

而且它们都是可怕的想法。您基本上是在创建全局变量。您应该更喜欢将引用传递给您创建的商店。

拿他们的grid example :

Ext.create('Ext.data.Store', {
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

它可以被重写，这样商店就不是全局可达的，因为商店经理是一个全局单例。

var store = Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});