2つのインデント・コンボをグリッド・ヘッダーに1つ、グリッド・カラム・ウィジェットとして1つをストア・フィルターに与える方法

Question

値を選択してグリッド・ストアをフィルタリングするウィジェット・ヘッダーが1つあります。私はグリッドヘッダーでも正確に同じものを望みます。私は同じ値で1つのコンボを与えています。ここで

は私がコラム

MyColumn: function(headersXmlDoc) { 
    var me = this, 
     gridConfig = {}; 

    gridConfig.columns = []; 
    Ext.each(headersXmlDoc.getElementsByTagName("HEADER"), function(header) { 
     var column = { 
      text: header.getAttribute("L"), 
      dataIndex: header.getAttribute("DATAINDEX"), 
      sortable: (header.getAttribute("ISSORTABLE").toLowerCase()=="true"), 
      widgetType: header.getAttribute("WIDGET"), 
      filterType: Ext.isEmpty(header.getAttribute("FILTER"))? undefined: header.getAttribute("FILTER"), 
     }; 
     switch (header.getAttribute("WIDGET")) { 
      case 'textbox': 
       if(column.filterType){ 
        if(column.filterType == 'TagData'){ 
         column.filter = { 
          xtype: 'tagfield', 
          growMax : 10, 
          valueField: 'title', 
          displayField: 'title', 
          parentGrid : me, 
          dataIndex:header.getAttribute("DATAINDEX"), 
          queryMode: 'local', 
          multiSelect: true, 
          isFilterDataLoaded: false, 
          disabled: true, 
          listeners:{ 
           focus: me.SomeMethod, // 
          } 
         };       
        } 
       } 
       break; 

     } 
     this.columns.push(column); 
    }, gridConfig); 

    return gridConfig.columns; 
}, 

でウィジェットタイプを作成してい列ヘッダ

header: { 
    items: [{ 
      xtype: 'combo', 
      displayField: "displayName", 
      fieldLabel: 'Some Label', 
      valueField: 'title', 
      displayField: 'title', 
      hidden : true, 
      queryMode: 'local', 
      value : 1, 
      autoSelect : true, 
      //dataindex:"MUTST", 
      store: { 
      fields: ["id", "displayName"], 
      data: [ 
        { "id": "1", "title": "Test1" }, 
        { "id": "2", "title": "Test2" }, 
        { "id": "3", "title": "Test3" } 
       ] 
      }, 
      listeners : { 
       select : function(combo , record , eOpts){ 
        debugger; 
        var sg = this.up("MyGrid"); 
        var col = sg.getColumns()[0]; // Getting Header column 
        var flit =sg.getColumns()[0].filter // Here I am getting object instead of constructor 
        //this.focus = sg.onComboFilterFocus(combo); 
       } 
      }, 
     }] 
}, 

ための私のコードで私は、ヘッダのコンボで選択した場合、それは直接だけでなくウィジェットコンボで選択されますしたいです。誰もこれを得る方法を説明することはできますか？おかげで事前に

Answer 1

あなたは基本的にヘッダーにコンボボックスが必要です。これはレコードの値を変更します - グリッドセル内のコンボを表示するウィジェット列は実際には関係ありません。

は、私はあなたがかなり接近していたと思います - しかし、あなたは「ヘッダ」設定を定義し、その項目にコンボを追加しようとしていた - 代わりにあなただけの列に直接アイテムを定義します。

columns: [{ 
    text: 'Combo Test', 
    dataIndex: 'title', 
    items: [{ 
     xtype: 'combobox', 
     width: '100%', 
     editable: false, 
     valueField: 'title', 
     displayField: 'title', 
     queryMode: 'local', 
     autoSelect: true, 
     store: { 
      data: [{ 
       "id": "1", 
       "title": "Test1" 
      }, { 
       "id": "2", 
       "title": "Test2" 
      }, { 
       "id": "3", 
       "title": "Test3" 
      }] 
     }, 
     listeners: { 
      select: function (combo, selectedRecord) { 
       //we could just get the value from the combo 
       var value = combo.getValue(); 
       //or we could use the selectedRecord 
       //var value = selectedRecord.get('id'); 

       //find the grid and get its store 
       var store = combo.up('grid').getStore(); 

       //we are going to change many records, we dont want to fire off events for each one 
       store.beginUpdate(); 
       store.each(function (rec) { 
        rec.set('title', value); 
       }); 
       //finish "mass update" - this will now trigger any listeners for saving etc. 
       store.endUpdate(); 

       //reset the combobox 
       combo.setValue(''); 
      } 

     } 
    }], 
}, 

実際の設定あなたがしようとしていたような値の選択リスナーに起こる - キーは、レコードをループしていると、上の呼設定それぞれ1： https://fiddle.sencha.com/#view/editor&fiddle/1r01：私はこの作業を表示するためにバイオリンを作成している

//find the grid and get its store 
var store = combo.up('grid').getStore(); 

//we are going to change many records, we dont want to fire off events for each one 
store.beginUpdate(); 
store.each(function (rec) { 
    rec.set('title', value); 
}); 
//finish "mass update" - this will now trigger any listeners for saving etc. 
store.endUpdate();