2013-03-08 88 views
0

我有一个JSON存储定义为基于相邻列阵列列表

var reader = new Ext.data.JsonReader({ 
    id: 'id', 
    totalProperty: 'totalCount', 
    root: 'rows', 
    fields: [{ 
     name: 'id' 
    }, { 
     name: 'seriesId', 
     type: 'string' 
    }, { 
     name: 'seriesTitle', 
     type: 'string' 
    }, { 
     name: 'productionId', 
     type: 'string' 
    }, { 
     name: 'triggered', 
     type: 'string' 
    }, { 
     name: 'partnerName', 
     type: 'string' 
    }, { 
     name: 'partnerId', 
     type: 'string' 
    }, { 
     name: 'startDate', 
     type: 'date' 
    }, { 
     name: 'startDate0', 
     mapping: 'startDate', 
     type: 'date' 
    }, { 
     name: 'endDate', 
     type: 'date' 
    }, { 
     name: 'drmType', 
     type: 'string' 
    }, { 
     name: 'defaultDrmType', 
     type: 'string' 
    } 

    ] 
}); 

var conn = new Ext.data.Connection({ 
    url: '/SyndicationPlatform/masterDrmStore/listJson', 
    timeout: 300000 
}); 

var proxy = new Ext.data.HttpProxy(conn); 

var store = new Ext.data.GroupingStore({ 
    reader: reader, 
    url: '/SyndicationPlatform/masterDrmStore/listJson', 
    proxy: proxy, 
    autoLoad: 'true', 
    //,groupField: ['seriesPartner'] 
    remoteSort: true 
}); 

I have a Column Model defined as below 
for the above json store. 

var cm = new Ext.grid.ColumnModel([{ 
    header: "<div class=\"x-grid3-hd-checker\" style=\"width: 26px;\">", 
    id: "priority", 
    width: 35, 
    sortable: false, 
    resizable: false, 
    menuDisabled: true, 
    fixed: true, 
    renderer: function (data, cell, record, rowIndex, columnIndex, store) { 
     if (data) { 
      var today = new Date(); 
      var startDate = new Date(record.data.startDate); 
      var out = '<div'; 
      out += (startDate < today) ? ' class="red-row" id="red-row"' : ((startDate < new Date(today.getTime() + 3 * 24 * 60 * 60 * 1000)) ? ' class="orange-row" id="orange-row"' : ((startDate < new Date(today.getTime() + 8 * 24 * 60 * 60 * 1000)) ? ' class="blue-row" id="blue-row"' : ' class="green-row" id="green-row"')); 
      out += '>'; 
      if (record.data.isLicenceUpdated == true) out += '<img src="/SyndicationPlatform/images/skin/exclamation.png" class="icon-updated"/>'; 
      else out += ""; 
      if (record.data.deliverable) { 
       out += '<div class="x-grid3-row-checker" id="x-grid3-row-checker"></div>'; 
      } 
      out += '</div>'; 
      return out; 
     } 
    }, 
    dataIndex: 'startDate0' 
}, { 
    header: "Partner", 
    id: "partner", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 35, 
    sortable: true, 
    dataIndex: 'partnerName' 
}, { 
    header: "Type", 
    id: "archiveCatchup", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 50, 
    sortable: true, 
    dataIndex: 'triggered' 
}, { 
    header: "Series", 
    id: "seriesPartner", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 50, 
    sortable: false, 
    hideable: false, 
    hidden: true, 
    dataIndex: 'seriesPartner' 
}, { 
    header: "Licence ID", 
    id: "licId", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 100, 
    sortable: true, 
    dataIndex: 'id' 
}, { 
    header: "Production ID", 
    id: "prodId", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 87, 
    sortable: true, 
    dataIndex: 'productionId' 
}, { 
    header: "Series ID", 
    id: "seriesId", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 50, 
    sortable: true, 
    dataIndex: 'seriesId', 
    hidden: true 
}, { 
    header: "DRM List", 
    id: "drmList", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 50, 
    sortable: true, 
    dataIndex: 'drmList', 
    hidden: true 
}, { 
    header: "Series Title", 
    id: "seriesTitle", 
    editor: new Ext.form.TextField({ 
     readOnly: true 
    }), 
    width: 190, 
    sortable: true, 
    dataIndex: 'seriesTitle', 
    hidden: false 
}, { 
    header: "Start Date", 
    id: "startDate", 
    editor: new Ext.form.DateField({ 
     readOnly: true, 
     hideTrigger: true, 
     format: 'd/m/Y' 
    }), 
    width: 65, 
    sortable: true, 
    renderer: Ext.util.Format.dateRenderer('d/m/Y'), 
    dataIndex: 'startDate' 
}, { 
    header: "End Date", 
    id: "endDate", 
    editor: new Ext.form.DateField({ 
     readOnly: true, 
     hideTrigger: true, 
     format: 'd/m/Y' 
    }), 
    width: 65, 
    renderer: Ext.util.Format.dateRenderer('d/m/Y'), 
    sortable: true, 
    dataIndex: 'endDate' 
}, { 
    header: "DRM Type", 
    id: "drmType", 
    editor: new Ext.form.ComboBox({ 
     mode: 'local', 
     forceSelection: true, 
     id: 'drm-combo' 
     typeAhead: true, 
     selectOnFocus: true, 
     triggerAction: 'all', 
     displayField: 'name', 
     valueField: 'name', 
     store: new Ext.data.JsonStore({ 
      autoLoad: true, 
      url: '/SyndicationPlatform/masterDrmStore/jsonDrmTypelist', 
      root: 'items', 
      fields: ['name'] 
     }) 
    }), 
    width: 80, 
    sortable: true, 
    dataIndex: 'drmType' 
}, 
rowActions]); 

我想有下拉列表用于组合框为从对应报头中的值动态组合框下拉列表:“ DRM列表“。

我该如何做到这一点?任何帮助,将不胜感激。谢谢

回答

0

这里是组合框类的扩展。

DynamicGridCombo = Ext.extend(Ext.form.ComboBox, { 
    initComponent: function() { 
     DynamicGridCombo.superclass.initComponent.call(this); 
     if(Ext.isObject(this.dynamic)) { 
      this.parents = new Array(); 
      Ext.each(this.dynamic.parents,function(parent, index){ 
       this.parents[index] = parent; 
      }, this); 

      this.lastQuery = ''; 


      this.addListener('beforequery', function(field){ 

       var grid = field.combo.gridEditor; 
       var indx = grid.row; 
       var store = grid.record.store; 
       var rec = store.getAt(indx); 

       var filters = []; 
       Ext.each(this.parents,function(parent){ 
        filters.push({ 
         property: parent, 
         value: rec.data[parent] 
        }); 
       }); 
       this.store.filter(filters); 
      }); 

      this.addListener('blur', function(field){ 
       this.store.clearFilter(true); 
      }); 
     } 
    } 
}); 

Ext.reg('DynamicGridCombo', DynamicGridCombo); 

定义你的连击这样:

{ 
    header: "Child Combo", 
    sortable: true, 
    dataIndex: 'childcombo', 
    editor: { 
     xtype:'DynamicGridCombo', 
     id: 'dynamic-childcombo-grid', 
     hiddenValue: 'id', 
     displayField: 'text', 
     valueField: 'id', 
     store: 'ChildStore', 
     triggerAction: 'all', 
     dynamic: { 
      parents: ['father'] //dataindex of the father store ** 
     }, 
     allowBlank: false, 
     forceSelection: true, 
     editable: false 
    } 
} 


{ 
    header: "Father", 
    sortable: true, 
    dataIndex: 'father', ** 
    editor:{ 
     xtype: 'DynamicGridCombo', //not necessary it could be a simple combo 
     id: 'dynamic-father-grid', 
     hiddenValue: 'id', 
     displayField: 'text', 
     valueField: 'id', 
     store: 'FatherStore', 
     triggerAction: 'all', 
     allowBlank: false, 
     forceSelection: true, 
     editable: false,     
    } 
} 

然后与父亲的参考定义子店:

{ 
     storeId: 'ChildStore', 
     url: 'myresturl', 
     fields: [{ 
      name: 'id' 
     }, { 
      name: 'text' 
     }, { 
      name: 'father' //you have to retrive the father value in the list 
     }] 
    } 

试试吧。 再见!

Al