2016-12-20 11 views
2

私は、次のコンボボックスは、宣言している:私は列の「サイズ」のために、グリッドとパネルでそれを使用ExtJSのフィルタリングコンボボックスストア

{ 
    xtype: 'combobox', 
    id:'sizeSelect', 
    store: new Ext.data.SimpleStore({ 
     fields: [ 
        {name: 'typeChoosen', type: 'string'}, 
        {name: 'sizeValue', type: 'string'} 
     ], 
     data: [ 
      ['DECIMAL','(9.2)'], 
      ['DECIMAL','(9.4)'], 
      ['DECIMAL','(19.2)'], 
      ['DECIMAL','(19.4)'], 
      ['DECIMAL','(28.2)'], 
      ['DECIMAL','(28.4)'], 
      ['DECIMAL','(38.2)'], 
      ['DECIMAL','(38.4)'], 
      ['TEXT','250'], 
      ['TEXT','500'], 
      ['TEXT','1000'], 
      ['TEXT','2000'], 
      ['TEXT','4000'], 
      ['INTEGER','dafault'] 
     ] 
    }) 
} 

enter image description here

を私はしたいですコンボボックスを 'サイズ'列に挿入して、前のセル値に基づいて更新し、それぞれのタイプに対応する値を設定します。私はフィルタリングに使用する次のリスナーを持つグリッドパネルで

listeners : { 
beforeitemdblclick : function(eventThis, record, item, index, e, eOpts,objA){ 

    var stateCombo = Ext.getCmp('sizeSelect'); 
    var currentTypeChoosen = record.raw[1] 
    stateCombo.store.each(function(storeItem){ 
      if(storeItem.data.typeChoosen == currentTypeChoosen){ 
       stateCombo.store.filter("typeChoosen",currentTypeChoosen); 
      }           
    }); 
} 

それは右のそれを比較するようだが、それだけではなく、値のコンボボックスでオブジェクトを返します。私はExtJSにはかなり初心者です。私が望むように動作させる方法は本当にありません。

UPDATE

これは私の作業コードです:

{ 
xtype: 'combobox', 
id:'sizeSelect', 
editable:false, 
valueField: 'typeValue', 
displayField: 'typeValue', 
mode:'local', 
lastQuery: '', 
allowBlank: false, 
listeners:{ 
}, 
store: new Ext.data.SimpleStore({ 
    fields: ['size', 'typeValue'], 
    data: [ 
      ['DECIMAL', '(9,2)'], 
      ['DECIMAL', '(9,4)'], 
      ['DECIMAL', '(19,2)'], 
      ['DECIMAL', '(19,4)'], 
      ['DECIMAL', '(28,2)'], 
      ['DECIMAL', '(28,4)'], 
      ['DECIMAL', '(38,2)'], 
      ['DECIMAL', '(38,4)'], 
      ['TEXT', '250'], 
      ['TEXT', '500'], 
      ['TEXT', '1000'], 
      ['TEXT', '2000'], 
      ['TEXT', '4000'] 
     ] 
}) 
} 

var panel3 = Ext.create('Ext.panel.Panel', { 
    id:'step3', 
    border:0, 
    xtype: 'panel', 
    anchor:'100% 100%', 
    hideMode:'display', 
    bodyStyle:"overflow-y:scroll !important;", 
    hidden:true, 
    autoHeight:true, 
    items: [{ 
     xtype: 'grid', 
     id:'tableTypeGrid', 
     border: false,      
     plugins: [ 
      Ext.create('Ext.grid.plugin.CellEditing', { 
       clicksToEdit: 2 
      }) 
     ], 
     listeners : { 
      beforeitemdblclick : function(eventThis, record, item, index, e, eOpts){ 
       var stateSizeCombo = Ext.getCmp('sizeSelect'); 
       var sizeColumnStore = stateSizeCombo.getStore(); 
       var prevCellValue = record.data.type; 
       sizeColumnStore.clearFilter(); 
       sizeColumnStore.filter('size', prevCellValue); // 
       } 
      }, 
      ... 

コンボボックスのプロパティは非常に重要であることが判明:)

答えて

1

私はあなたがグリッドのbeforeeditイベントを使用することができると思います(Ext.grid.plugin.Editingから追加):

beforeedit: function(plugin, context) { 
     // Current editor panel size combo 
     var sizeCombo = plugin.editor.down('combo[name=size]'); 
     if(sizeCombo) { 
      var sizeStore = sizeCombo.getStore(); 
      sizeStore.clearFilter(); 
      sizeStore.filter('type', context.record.get('type')); 
     } 
    } 

これをチェックするsimple example

+0

ありがとうございます!この例は本当に役に立ちます。私は後でそれを試してみたいと思います。また、私のコードを使って作業してくれることを願っています。私が使用できるextの最新バージョンは4.0です。 :/それは疑問だ。 – Nyagolova

+1

@Nyagolova、確かに、それをチェックしてください!実際には、私もExtJS 4と一緒に働いていました。あなたの質問に答えるためにExtJS 4のドキュメントを読んでいましたので、ExtJS 4+で動作するはずです。そうでなければ、ここに私に尋ねてください。 –

+0

私はそれを受け入れるつもりです。あなたが私のコードで同じように実装されていないにもかかわらず、多くの助けをしてくれたからです。 :) – Nyagolova