extjs - ExtJS 服装店代表

Question

如果有任何 ExtJS 方式可以加载存储数据并且加载后我可以在主面板中创建其他我的组件（自定义面板）以我的特定方式显示该数据，我会徘徊吗？

我想用我的自定义组件在面板中显示数据

Answer 1

你有两个选择：

1. 如果您只需要显示数据，那么DataView就是为此任务量身定制的。
2. 如果您确实需要一个组件（即，封装用户交互而不仅仅是显示的组件），那么您需要创建此组件，并在您的商店加载时为每个记录创建一个组件并将其添加到您的主面板。

要复制 dataview 的文档示例（选项 1）：

Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'src', type:'string' },
        { name:'caption', type:'string' }
    ]
});

Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: [
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
    ]
});

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('imagesStore'),
    tpl: imageTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
    renderTo: Ext.getBody()
});