是否可以使用 ext js 组件作为数据视图的项目渲染器来代替使用 tpl

Question

我对Ext JS 3.4有一些经验我可以创建一个带有存储并使用 tpl 来显示/呈现项目的数据视图。

但是我想要的是为布局创建一个项目渲染器（就像在 Flex 中一样）在分机设计器中。并在数据视图中重复此组件。我找不到有关数据视图或列表视图的项目呈现器的任何文档。

有人有这方面的经验吗？

问候克里斯。

Answer 1

Yo 可以做这样的事情：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[e-mail]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[e-mail]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[e-mail]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[e-mail]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    height: 200,
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name',
        renderer: theRender,
    }]
});
function theRender(value, id, record)
{
    var id = Ext.id();
    Ext.defer(myComponent, 10, this, [id, record.get('name')]);
    return '<div id="' + id + '"></div>';
}
function myComponent(id, value) {
    new Ext.Button({
        text: value,
        handler : function(btn, e) {
            alert('Hi ' + value);
        }
    }).render(document.body, id);
}​

这个想法是为每一行创建div 元素，并在这些元素中呈现您的组件。请看一下这个工作示例：

http://jsfiddle.net/lontivero/p8qDL/

我正在使用按钮组件，但您可以以相同的方式使用自己的复杂组件。

祝你好运。