3

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

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

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

  1. 在每个内部网格中，加载网格时，行旁边会显示一个减号
  2. 单击内部网格中的一行时，它会打开，但再次单击时，它不会折叠。
  3. 我注意到每个内部网格的行和外部网格的行之间存在“神秘”的联系——例如，双击内部网格的第二行会在第二个网格中引起折叠/展开反应外网格中的行（但扩展后对内网格没有影响）。

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

这是我的代码：

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);

});

谢谢！！！

4

2 回答 2

1

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

于 2012-11-21T18:40:41.560 回答
0

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

于 2012-08-28T13:55:43.873 回答