Question

我正在尝试在Ext JS网格中创建“扩展/折叠”列的效果。为此，我想在列的名称旁边添加一个图标/按钮，这样当有人点击它时，它的子列将被隐藏或显示。

我已经创建了一个小提琴（代码也粘贴在下面），它显示了我希望我的网格如何表现：http://jsfiddle.net/a1umupea/

在我的解决方案中，我创建了一个调用操作网格的javascript函数的链接。

使用Ext JS 4.2有没有更好的方法来实现这一点，而不是编写单独的javascript函数？

Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId: 'fruitStore',
        fields: ['name', 'Total', 'Apple', 'Banana', 'Orange'],
        data: {
            'items': [{
                'name': 'Lisa',
                "Total": "5",
                "Apple": "3",
                "Banana": "1",
                "Orange": "1"
            }, {
                'name': 'Bart',
                "Total": "10",
                "Apple": "5",
                "Banana": "2",
                "Orange": "3"
            }, {
                'name': 'Homer',
                "Total": "15",
                "Apple": "5",
                "Banana": "5",
                "Orange": "5"
            }, {
                'name': 'Marge',
                "Total": "15",
                "Apple": "10",
                "Banana": "3",
                "Orange": "2"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Fruits',
        id: 'fruitGrid',
        layout:'fit',
        store: Ext.data.StoreManager.lookup('fruitStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: '<a href="#" onclick="toggle(this)">[+]</a> Fruits',
            columns:[

            {
                    text: 'Total',
                    dataIndex: 'Total'
            },
            {
                text: 'Apple',
                dataIndex: 'Apple',
                hidden:true
            },
            {
                text: 'Banana',
                dataIndex: 'Banana',
                hidden:true
            },
            {
                text: 'Orange',
                dataIndex: 'Orange',
                hidden:true
            }
          ]
         }   
        ],
        height: 300,
        width: 500,
        renderTo: Ext.getBody()
    });
});


function toggle(t){
    var grid = Ext.getCmp('fruitGrid');
    console.log(grid);
    for(var i = 0 ; i < grid.headerCt.gridDataColumns.length ; i++){
        var col = grid.headerCt.gridDataColumns[i];

         if (col.text == 'Apple' || col.text=='Banana' || col.text=='Orange'){
            if(col.isVisible()) col.setVisible(false);
            else col.setVisible(true);
        }
    }
    if(t.text.indexOf('+') != -1){
            t.text=t.text.replace('+','-');
    }
    else
        t.text=t.text.replace('-','+');
}

Answer 1

将headerclick事件与事件委派一起使用：

Ext.onReady(function() {
    var s = Ext.create('Ext.data.Store', {
        fields: ['name', 'Total', 'Apple', 'Banana', 'Orange'],
        data: [{
            name: 'Lisa',
            Total: "5",
            Apple: "3",
            Banana: "1",
            Orange: "1"
        }, {
            name: 'Bart',
            Total: "10",
            Apple: "5",
            Banana: "2",
            Orange: "3"
        }, {
            name: 'Homer',
            Total: "15",
            Apple: "5",
            Banana: "5",
            Orange: "5"
        }, {
            name: 'Marge',
            Total: "15",
            Apple: "10",
            Banana: "3",
            Orange: "2"
        }]
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Fruits',
        store: s,
        columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: '<a class="expander">[+]</a> Fruits',
                columns: [{
                    text: 'Total',
                    dataIndex: 'Total'
                }, {
                    text: 'Apple',
                    dataIndex: 'Apple',
                    hidden: true
                }, {
                    text: 'Banana',
                    dataIndex: 'Banana',
                    hidden: true
                }, {
                    text: 'Orange',
                    dataIndex: 'Orange',
                    hidden: true
                }]
            }

        ],
        height: 300,
        width: 500,
        renderTo: Ext.getBody(),
        listeners: {
            headerclick: function(headerCt, column, e) {
                var cols, len, i, col, text;
                if (e.getTarget('.expander')) {
                    e.stopEvent();
                    cols = headerCt.gridDataColumns;
                    for (i = 0, len = cols.length; i < len; i++) {
                        col = cols[i];

                        if (col.text == 'Apple' || col.text == 'Banana' || col.text == 'Orange') {
                            col.setVisible(col.hidden);
                        }
                    }
                    text = column.text;
                    if (text.indexOf('+') != -1) {
                        text = text.replace('+', '-');
                    } else {
                        text = text.replace('-', '+');
                    }
                    column.setText(text);
                }
            }
        }

    });
});

Ext JS：向网格中的列添加按钮以显示/隐藏其他列

1 个答案: