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

3番目の問題の唯一の理由は、idをグリッドに言及せず、それに従うことです..デフォルトでは、extjsは行と列のインデックスを使用して折りたたみと展開を行います。したがって、内側のグリッドの 2 行目の行インデックスは、外側のグリッドの 2 行目の行インデックスと同じになります。他の 2 つの問題についても同じ理由である可能性があります。ソース コードが必要な場合は、サンプルを添付してお知らせください。

于 2012-11-21T18:40:41.560 に答える
0

別の拡張可能なグリッドを持つことは複雑です (ユーザーにとって)。左側の領域にツリーを、右側の領域に詳細を表示する 1 つの境界パネルを作成してみてください (デザインに該当する場合)。

于 2012-08-28T13:55:43.873 に答える