Question

我有一个定义为

的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 List”。

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

Answer 1

这是组合框类的扩展名。

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

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

1 个答案: