Extjs 基于相邻列数组列表的动态组合框下拉列表

我将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]);

var reader=new Ext.data.JsonReader({
id:'id'，
totalProperty:“totalCount”，
root:'行'，
字段：[{
姓名：“id”
}, {
名称：“seriesId”，
键入：“字符串”
}, {
名称：'seriesTitle'，
键入：“字符串”
}, {
名称：“productionId”，
键入：“字符串”
}, {
名称：“已触发”，
键入：“字符串”
}, {
名称：“partnerName”，
键入：“字符串”
}, {
名称：'partnerId'，
键入：“字符串”
}, {
名称：“开始日期”，
键入：“日期”
}, {
名称：“startDate0”，
映射：“startDate”，
键入：“日期”
}, {
名称：'endDate'，
键入：“日期”
}, {
名称：'drmType'，
键入：“字符串”
}, {
名称：“defaultDrmType”，
键入：“字符串”
}
]
});
var conn=新的Ext.data.Connection({
url:“/SyndicationPlatform/masterDrmStore/listJson”，
超时：300000
});
var proxy=新的Ext.data.HttpProxy（conn）；
var store=new Ext.data.GroupingStore({
读者：读者，
url:“/SyndicationPlatform/masterDrmStore/listJson”，
代理：代理，
自动加载：“true”，
//，groupField:['seriesPartner']
remoteSort：对
});
我有一个列模型定义如下
对于上述json存储。
var cm=新的Ext.grid.ColumnModel([{
标题：“”，
id:“优先级”，
宽度：35，
可排序：false，
可调整大小：false，
menuDisabled：没错，
修正：对，
渲染器：函数（数据、单元格、记录、行索引、列索引、存储）{
如果（数据）{
var today=新日期（）；
var startDate=新日期（record.data.startDate）；
var out=''；
if（record.data.isLicenceUpdated==true）out+=''；
else out+=“”；
if（记录、数据、可交付成果）{
out+=''；
}
out+=''；
返回；
}
},
数据索引：“startDate0”
}, {
标题：“合作伙伴”，
id:“合作伙伴”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：35，
可排序：是的，
数据索引：“partnerName”
}, {
标题：“类型”，
id:“archiveCatchup”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：50，
可排序：是的，
数据索引：“已触发”
}, {
标题：“系列”，
id:“seriesPartner”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：50，
可排序：false，
可隐藏的：错误，
隐藏：是的，
数据索引：“seriesPartner”
}, {
标题：“许可证ID”，
id:“licId”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：100，
可排序：是的，
数据索引：“id”
}, {
标题：“生产ID”，
id:“prodId”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：87，
可排序：是的，
数据索引：“productionId”
}, {
标题：“序列ID”，
id:“seriesId”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：50，
可排序：是的，
dataIndex:'seriesId'，
隐藏：真的
}, {
标题：“DRM列表”，
id:“drmList”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：50，
可排序：是的，
数据索引：“drmList”，
隐藏：真的
}, {
标题：“系列标题”，
id:“序列号”，
编辑器：新建Ext.form.TextField({
只读：正确
}),
宽度：190，
可排序：是的，
dataIndex:'SerieStle'，
隐藏：假
}, {
标题：“开始日期”，
id:“起始日期”，
编辑器：新建Ext.form.DateField({
只读：对，
希德崔格：没错，
格式：“d/m/Y”
}),
宽度：65，
可排序：是的，
渲染器：Ext.util.Format.dateRenderer（'d/m/Y'），
数据索引：“开始日期”
}, {
标题：“结束日期”，
id:“结束日期”，
编辑器：新建Ext.form.DateField({
只读：对，
希德崔格：没错，
格式：“d/m/Y”
}),
宽度：65，
渲染器：Ext.util.Format.dateRenderer（'d/m/Y'），
可排序：是的，
数据索引：“endDate”
}, {
标题：“DRM类型”，
id:“drmType”，
编辑器：新建Ext.form.ComboBox({
模式：“本地”，
选择：对，
id:“drm组合”
是的，
selectOnFocus:true，
触发动作：“全部”，
displayField:'名称'，
valueField:'名称'，
存储：新Ext.data.JsonStore({
自动加载：对，
url:“/SyndicationPlatform/masterDrmStore/jsonDrmTypelist”，
root:'项目'，
字段：['name']
})
}),
宽度：80，
可排序：是的，
数据索引：“drmType”
},
(行动),；

我想让组合框的下拉列表作为相应标题的值：“DRM列表”

---

我怎样才能做到这一点？在此方面的任何帮助都将不胜感激。谢谢

这里是combobox类的扩展

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
        }]
    }

试试看。 再见

艾尔