是否可以使用ExtJS组件作为Dataview的项目呈现程序，而不是使用tpl？

我对ExtJS3.4有一些经验 我可以创建一个带有存储的Dataview，并使用tpl来显示/呈现项目

但是我想要的是为布局创建一个项目渲染器（就像在Flex中一样） 在extdesigner中。并在DataView中重复此组件。 我找不到任何关于DataView或ListView的项目呈现器的文档

有人有这方面的经验吗

问候,，

---

克里斯。

你可以这样做：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "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);
}​

Ext.create（'Ext.data.Store'{
storeId:'SimpsonStore'，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：{'items'：[
{“姓名”：“丽莎”，“电子邮件”：lisa@simpsons.com，“电话”：“555-111-1224”}，
{'name'：'Bart'，“email”：bart@simpsons.com，“电话”：“555-222-1234”}，
{'name'：'Homer'，“email”：home@simpsons.com，“电话”：“555-222-1244”}，
{'name'：'Marge'，“email”：marge@simpsons.com，“电话”：“555-222-1254”}
]},
代理：{
键入：“内存”，
读者：{
键入：“json”，
root:'项目'
}
}
});
Ext.create（'Ext.grid.Panel'{
renderTo:Ext.getBody（），
身高：200，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
文本：“名称”，
数据索引：“名称”，
主席：主席，
}]
});
其中的函数（值、id、记录）
{
var id=Ext.id（）；
Ext.defer（myComponent，10，this，[id，record.get（'name'））；
返回“”；
}
函数myComponent（id、值）{
新的分机按钮({
文本：值，
处理程序：函数（btn，e）{
警报（“高”+值）；
}
}).render（文档主体、id）；
}​

其思想是为每行创建div元素，并在这些元素中渲染组件。请看下面的工作示例：

我使用的是一个按钮组件，但是你可以用同样的方式使用你自己的复杂组件

---

祝你好运。

你可以这样做：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "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);
}​

Ext.create（'Ext.data.Store'{
storeId:'SimpsonStore'，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：{'items'：[
{“姓名”：“丽莎”，“电子邮件”：lisa@simpsons.com，“电话”：“555-111-1224”}，
{'name'：'Bart'，“email”：bart@simpsons.com，“电话”：“555-222-1234”}，
{'name'：'Homer'，“email”：home@simpsons.com，“电话”：“555-222-1244”}，
{'name'：'Marge'，“email”：marge@simpsons.com，“电话”：“555-222-1254”}
]},
代理：{
键入：“内存”，
读者：{
键入：“json”，
root:'项目'
}
}
});
Ext.create（'Ext.grid.Panel'{
renderTo:Ext.getBody（），
身高：200，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
文本：“名称”，
数据索引：“名称”，
主席：主席，
}]
});
其中的函数（值、id、记录）
{
var id=Ext.id（）；
Ext.defer（myComponent，10，this，[id，record.get（'name'））；
返回“”；
}
函数myComponent（id、值）{
新的分机按钮({
文本：值，
处理程序：函数（btn，e）{
警报（“高”+值）；
}
}).render（文档主体、id）；
}​

其思想是为每行创建div元素，并在这些元素中渲染组件。请看下面的工作示例：

我使用的是一个按钮组件，但是你可以用同样的方式使用你自己的复杂组件

---

祝你好运。

很好，有一个工作示例+1，但可能会遇到计时问题。谢谢你的示例+10:）很好，有一个工作示例+1，但可能会出现计时问题。谢谢您的示例+10 :)