extjs - ट्री के बच्चों / नोड पर ईवेंट क्लिक करें




extjs4 (2)

मैं एक्स्टजे ट्री ऑब्जेक्ट से वास्तव में उलझन में हूं, मेरे कोड में कुछ गलत है लेकिन मैं नहीं जानता कि क्या है

मैं इस कोड पर विचार करें:

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: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

मैं अपने पेड़ के बच्चों / पत्ते पर एक क्लिक ईवेंट कैसे बाँध सकता हूं?


Answers

इस तरह?

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: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    listeners: {
        itemclick: function(s,r) {
                alert(r.data.text);
        }
    }
});

यह जेएसएफडियल देखें


मैं आवश्यक कॉलम के लिए अतिरिक्त getRowClass लागू करने के साथ getRowClass का उपयोग करने का सुझाव देता हूं:

Ext.create('Ext.grid.Panel', {
    columns: [
        // ...
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' },
        // ...
    ],

    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    // ...
});

सीएसएस:

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

यहां demo