Question

我有一个树形面板，我想使用我自己的自定义图像，该图像可以在单击paraent元素后更改。目前，我正在获取箭头和文件夹。我想要我自己的形象。

这是我的树。

var root = {
    expanded: true,
    children: [{
        text: "Configure Application",
        expanded: true,
        children: [{
            text: "Manage Application",
            leaf: true
        }, {
            text: "Scenario",
            leaf: true
        }]
    }, {
        text: "User Configuration",
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }, {
        text: "Test Configuration",
        //leaf: true,
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }]
};

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margin: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        id: 'west-region-container',
        layout: {
            type: "vbox",
            align: "stretch"
        },
        items:[{
            xtype: 'panel',
            width : 200,
            margin: '5 0 0 5',
            layout: {
                type: "vbox",
                align: "stretch"
            },
            items:[]
        },{
            xtype: 'treepanel',
           // useArrows: true,
            autoScroll: false,
            animate: true,
            enableDD: false,
            title: 'Configuration',
            width: 200,
            height: 400,
            rootVisible: false,
            store: Ext.create('Ext.data.TreeStore', {
                root: root
            }),
            listeners: {
                itemclick: function(s, r) {
                    alert(r.data.text);
                }
            }
        }]


    }],
    renderTo: Ext.getBody()
});

我正在使用useArrow。我有两个要在单击项目时更改的图像，但首先我无法在树项目上加载图像。我只希望在父元素上而不在子元素上。任何潜在客户都会感激不尽。

Answer 1

如果我正确理解您的问题，这可能会对您有所帮助。这对我有效（使用ExtJS 4.2）。我想指出的是，我很少使用CSS自定义ExtJS控件，因此请更仔细地进行测试。

在创建树时设置图标（带图标的第一个父节点，带CSS的第二个父节点）：

var root = {
    expanded: true,
    children: [{
        text: "ICON Configuration",
        icon: 'first.png',
        expanded: true,
        children: [{
            text: "Manage Application",
            leaf: true
        }, {
            text: "Scenario",
            leaf: true
        }]
    }, {
        text: "CSS Configuration",
        iconCls: 'testtree-node-firsticon-parent',
        cls: 'testtree-node-text-parent',
        expanded: true,
        children: [{
            text: "Manage User",
            leaf: true
        }, {
            text: "User rights",
            leaf: true
        }]
    }]
};

单击父节点后，更改父图标（第一个父节点为图标，第二个为CSS）：

...
if (!r.data.leaf) {
    if (r.data.text == 'CSS Configuration') {
        r.set('iconCls', 'testtree-node-secondicon-parent');
    } else {
        r.set('icon', 'second.png');
    }   
}
...

CSS：

.testtree-node-firsticon-parent { 
    background: url('first.png') !important;
}
.testtree-node-secondicon-parent { 
    background: url('second.png') !important;
}
.testtree-node-text-parent { 
    font-weight: bold !important;
    font-size: 14px !important;
}

如何对树数据使用自定义

1 个答案: