在Ext.data.TreeStore节点EXT JS 4x中插入HTML表

时间:2013-05-06 05:32:30

标签: extjs html-table

请帮我找到在treepanel ext js。

节点内插入html表的解决方案

找到截图:

enter image description here

1 个答案:

答案 0 :(得分:1)

以下是一个示例:

http://jsfiddle.net/arunv/kGksk/

它应该可以帮助你开始。

ExtJS的:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: '<table class="sample_table"><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr></table>', leaf: true }
        ]
    }
});

var tree = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    useArrows: true,
    width: 500,
    height: 500,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

var root = tree.getRootNode();
root.appendChild({ text: '<table class="sample_table"><tr><td>aa</td><td>ab</td></tr><tr><td>ba</td><td>bb</td></tr></table>', leaf: true});

的CSS:

.sample_table {
    display: inline-block;
}

.sample_table td {
    border: 1px solid black;
    padding: 5px;
}