Question

我正在尝试修改可以找到的第一个ExtJS示例here

满足我的需求。我想要一个可扩展的网格，在其中单击特定项目，打开另一个可扩展网格。

我已尝试将这些更改引入现有代码并遇到以下问题：

在每个内部网格中，当网格加载时，行旁边会显示一个减号
当点击内部网格中的一行时，它会打开，但再次点击时，它不会崩溃。
我注意到每个内部网格的行与外部网格的行之间存在“神秘”连接 - 例如，双击内部网格中的第二行将导致崩溃/扩展反应在外部网格的第二行（但在展开后对内部网格没有影响）。

我在哪里弄错了或误用了代码？

这是我的代码：

var urlObject = Ext.urlDecode(document.location.search);
var request_url = 'my_url';
var request_state = 'my_state';

// row expander
var expander = new Ext.ux.grid.RowExpander({
    tpl : new Ext.Template(
        '<p>{layer_name} --- under construction!!!</p>'
    )
});

expander.on('expand', function(rowExp, rec, body, rowIndex) {

    var inner_expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<p>under construction!!!</p>'
        )
    });


    var sub_layer_store = new Ext.data.JsonStore ({
        url: request_url,
        fields: ['sub_layer_name'],
        root: 'sub_layer_names',
        baseParams: {
            _state: request_state,
            _action: 'get_sub_layer_names',
            layer_name: rec.data.layer_name
        }
    });

    var sub_layer_grid = new Ext.grid.GridPanel({
        store: sub_layer_store,
        cm: new Ext.grid.ColumnModel({
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [
                inner_expander,
                {header: "Sub-Layer", width: 40, dataIndex: 'sub_layer_name'}
            ]
        }),
        viewConfig: {
            forceFit:true
        },        
        width: 1100,
        height: 200,
        plugins: inner_expander,
        collapsible: true,
        animCollapse: false,
        title: 'Sub-Layers information',
        iconCls: 'icon-grid',
        renderTo: body
    });

    //load the sub grid
    sub_layer_grid.store.load();

});

var layers_store = new Ext.data.JsonStore ({
    url: request_url,
    fields: ['layer_name'],
    root: 'layer_names',
    baseParams: {
        _state: request_state,
        _action: 'get_layer_names'
    }
});


var layers_grid = new Ext.grid.GridPanel({
    store: layers_store,
    cm: new Ext.grid.ColumnModel({
        defaults: {
            width: 20,
            sortable: true
        },
        columns: [
            expander,
            {header: "Layer", width: 40, dataIndex: 'layer_name'}
        ]
    }),
    viewConfig: {
        forceFit:true
    },        
    width: 1200,
    height: 500,
    plugins: expander,
    collapsible: true,
    animCollapse: false,
    title: 'Layers information',
    iconCls: 'icon-grid'
});


Ext.onReady(function(){

    var el = document.getElementById('my_container');

    layers_grid.store.load();
    layers_grid.render(el);

});

感谢!!!

Answer 1

你的第三个问题的唯一原因是你没有提到id到网格并跟着它... 默认情况下，extjs使用行和列索引进行折叠和展开。所以内网格的第二行的行索引与外网格的第二行的行索引相同。可能是其他两个问题的原因相同。如果有人需要sourxe代码，请告知我将附上样本。

Answer 2

拥有另一个可扩展网格很复杂（对于用户而言）。您可以尝试在左侧区域使用一个带有树的边框面板，在右侧区域使用详细信息（如果适用于您的设计）。

嵌套的可扩展网格 - 内部网格不会折叠和正确扩展

2 个答案: