1

ExtJSを使用してアプリケーションを開発していますが、モデルの1つに配列型のフィールドがありますが、dataIndex1つのセルを編集したときにデータが繰り返されないように、グリッドにを設定するにはどうすればよいですか？

私のコードを以下に示します。

ここに画像の説明を入力してください

{
        xtype: 'button',
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler : function() {  
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            grid = gridView.headerCt;
            if(grid.getGridColumns().length >= 1){
                var column = Ext.create('Ext.grid.column.Column', { dataIndex: 'interval', text : contador, 
                    editor: {xtype: 'textfield', flex: 0.5, editable: true}});
                grid.insert(gridView.columns.length, column);
                gridView.getView().refresh();
                var botao = Ext.getCmp('buttonRemoverColuna');
                botao.setDisabled(false);
            }
            contador++;
        }
    }


Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'id',
    type : 'long'
}, {
    name : 'name',
    type : 'string'
}, {
    name: 'interval',
    type: 'array'
}]
});
4

1 に答える 1

3

簡単な答えは、挿入する新しい列ごとに異なる構成を与える必要があるということですdataIndex。

今のところ、誰もが取得しdataIndex: 'interval'ます。

つまりinterval、そのレコードのストアのフィールドに値を入力すると、フィールドに接続されているすべての列にintervalその値が表示されます。

これを行う簡単な方法は、ハンドラーを次のように変更することです。

handler : function() {  
    var gridView = Ext.ComponentQuery.query('gridpanel')[1],
        grid = gridView.headerCt,
        columnCount = grid.getGridColumns().length;

    if (columnCount >= 1){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + columnCount, 
                text: contador, 
                editor: {xtype: 'textfield', flex: 0.5, editable: true}
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

dataIndex具体的には、ハンドラーからの次の構成interval1により、interval2、interval3、 、 などのインクリメントが与えられinterval4ます。サーバー側のセットアップについては何も知らないので、それが機能するかどうかはわかりません。

dataIndex: 'interval' + columnCount,

編集：

arrayカスタムデータ タイプを定義していないと仮定すると、intervalフィールド データ タイプは実際にはデフォルトでstring. グリッド列の構成を使用して目的を達成するのは簡単です。すぐにrenderer例を投稿しますが、データ型を に戻すこともできますstring。

例：

interval基本的な考え方は、実際のintervalフィールド値を配列に分割することにより、追加された列の個々の値を表示する列構成にレンダラーを追加することです。どの列がどの配列値dataIndexに一致するかを識別できるように、上記のように個別の構成を使用してグリッド列を実装する必要があります。interval

handler : function() {  
    var grid = Ext.ComponentQuery.query('gridpanel')[1],
        header = grid.headerCt,
        intervalIndex = header.getGridColumns().length - 1;

    if (intervalIndex >= 0){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + intervalIndex, 
                text: contador, 
                editor: {
                    xtype: 'textfield', 
                    intervalIndex: intervalIndex,
                    flex: 0.5, 
                    editable: true
                },

                // this will make the values display properly when not editing
                renderer: function(value, meta, record) {
                    var intervals = record.get('interval').split(',');
                    return intervals[intervalIndex];
                }
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

beforeeditグリッドにeditはイベント リスナーも必要です。

行の編集を開始beforeeditすると、ハンドラーはinterval値を正しい列フィールドに分割します。

editハンドラーは、異なる列からの更新されたフィールド値を 1 つの文字列に結合し、行の編集が完了すると、それを実際のフィールドに適用intervalします。

Ext.create('Ext.grid.Panel', {
    // your other grid configs...
    listeners: {

        // this will make the values display properly when you start a row edit
        beforeedit: function(plugin, edit) {
            plugin.editor.items.each(function(field) {
                var idx = field.intervalIndex;
                if (idx) {
                    var value = edit.record.get('interval').split(',')[idx];
                    Ext.defer(function() {
                        field.setValue(value);
                    }, 10);
                }
            });
        },

        // update the value of the real "interval" field when done editing
        edit: function(plugin, edit) {
            var intervalArray = [],
                var regex = /interval\d/;

            Ext.Object.each(edit.newValues, function(key, value) {
                if (regex.test(key)) {
                    intervalArray.push(value);
                }
            });

            // sets the interval value into a comma seperated value string
            edit.record.set('interval', intervalArray.join(','));
        }
    }
});

上記のeditリスナーを使用すると、モデルのintervalフィールドの値が、追加された列の値で CSV 文字列として更新されます'value1,value2,value3,etc'。

サーバー側で文字列を解析するのはあなた次第です。しかし、ほとんどのプログラミング言語にはstringValue.split(",")、CSV 文字列を実数配列に変換するタイプの関数があります。

値をより「配列のよう」にしたい場合intervalは、括弧で囲むこともできます。

edit.record.set('interval', '[' + intervalArray.join(',') + ']')

それがあなたの解析に役立つかどうかはわかりません。

于 2012-07-30T17:44:01.453 に答える