Ext中怎么重用组件

Question

我再一张页面里写了一个下拉框，在同一张页面里的另外一个地方也要用到它，想知道下怎么能把它重用！

Answer 1

有两二种方法：一是继承。
我在项目的做法是放在basePanel中。所有的其它的比如companyPanel都继承于这个。而这个又继承于Ext.panel.
还有一种方法是采用了另外一个类文件，把所有的combox都写在这个文件中。之后只要直接调用就可以了。
给一个例子：这也是很多项目都会用到相关的东西。

Morik.Office.CommonCombox = function() {
return {
createCompanyCombox : function(config) {
var recordType = $createRT(RT_Company);
var ds = $createDs({
serverMethod : CompanyService.getCompanyList,
recordType : recordType,
defaultParams : {
arg : ['', ''],
limit : 'all'
}
});
var companyCombo = new Ext.form.ComboBox(Ext.applyIf(config || {},
{
tpl : '

{comName}

',
store : ds,
displayField : 'comName',
valueField : 'id',
typeAhead : true,
triggerAction : 'all',
emptyText : '请选择...',
// hiddenName : 'comName',
selectOnFocus : true,
loadingText : 'loading....',
lazyRender : true
}));

        return {
            self : companyCombo,
            ds : ds,
            rt : recordType
        };

    },
    createDepartmentCombox : function(config) {
        var recordType = $createRT([{
            name : "id",
            type : "int"
        }, {
            name : "depNum",
            type : "string"
        }, {
            name : "depName",
            type : "string"
        }]);
        /*
         * var ds = $createDs({ serverMethod :
         * DepartmentService.getSuperDepartmentList, recordType :
         * recordType, defaultParams : { arg : ['', ''], limit : 'all' } });
         */

        var ds = new Ext.data.Store({
            proxy : new Ext.data.DWRProxy(
                    DepartmentService.getSuperDepartmentList, false),
            reader : new Ext.data.ListRangeReader({
                id : 'id',
                totalProperty : 'totalSize'
            }, recordType),
            remoteSort : false,
            baseParams : {
                arg : ['', ''],
                limit : 'all'
            }
        });
        var depCombo = new Ext.form.ComboBox(Ext.applyIf(config || {}, {
            tpl : '<tpl for="."><div ext:qtip="{depName}" class="x-combo-list-item">{depName}</div></tpl>',
            store : ds,
            displayField : 'depName',
            valueField : 'id',
            typeAhead : true,
            triggerAction : 'all',
            emptyText : '请选择...',
            selectOnFocus : true,
            loadingText : 'loading....',
            lazyRender : true
        }));

        return {
            self : depCombo,
            ds : ds,
            rt : recordType
        };
    },
    createUserCombox : function(config) {
        var recordType = new Ext.data.Record.create([{
            name : "id",
            type : "int"
        }, {
            name : "userNum",
            type : "string"
        }, {
            name : "trueName",
            type : "string"
        }]);
        /*
         * var ds = $createDs({ serverMethod :
         * DepartmentService.getDeppersonList, recordType : recordType,
         * defaultParams : { arg : ['', ''], limit : 'all' } });
         */
        var ds = new Ext.data.Store({
            proxy : new Ext.data.DWRProxy(
                    DepartmentService.getDeppersonList, false),
            reader : new Ext.data.ListRangeReader({
                id : 'id',
                totalProperty : 'totalSize'
            }, recordType),
            remoteSort : false,
            baseParams : {
                arg : ['', ''],
                limit : 'all'
            }
        });
        var userCombo = new Ext.form.ComboBox(Ext.applyIf(config || {}, {
            tpl : '<tpl for="."><div ext:qtip="{trueName}" class="x-combo-list-item">{trueName}</div></tpl>',
            store : ds,
            displayField : 'trueName',
            valueField : 'id',
            typeAhead : true,
            triggerAction : 'all',
            emptyText : '请选择...',
            selectOnFocus : true,
            loadingText : 'loading....',
            lazyRender : true
        }));

        return {
            self : userCombo,
            ds : ds,
            rt : recordType
        };

    },
    createDepartmentTelPhoneCombox : function(config) {
        var recordType = $createRT(RT_Telphone);
        var ds = $createDs({
            serverMethod : TelphoneService.getTelphoneList,
            recordType : recordType,
            defaultParams : {
                arg : ['', ''],
                limit : 'all'
            }
        });

        var telCombo = new Ext.form.ComboBox(Ext.applyIf(config || {}, {
            tpl : '<tpl for="."><div class="x-combo-list-item">{phoneNum}</div></tpl>',
            store : ds,
            displayField : 'phoneNum',
            valueField : 'id',
            typeAhead : true,
            triggerAction : 'all',
            emptyText : '请选择...',
            selectOnFocus : true,
            loadingText : 'loading....',
            lazyRender : true
        }));

        return {
            self : telCombo,
            ds : ds,
            rt : recordType
        };

    },

    createLabelCompanyCombo : function(config) {
        var c = Morik.Office.CommonCombox.createCompanyCombox(Ext.applyIf(
                config || {}, {
                    fieldLabel : '公司名称',
                    name : 'companyname',
                    anchor : '98%',
                    model : 'local',
                    selectOnFocus : true
                }));

        return c;
    },
    createLabelDepartmentCombo : function(config) {
        var c = Morik.Office.CommonCombox.createDepartmentCombox(Ext
                .applyIf(config || {}, {
                    fieldLabel : '部门名称',
                    name : 'departmentname',
                    anchor : '98%',
                    model : 'local',
                    selectOnFocus : true
                }));

        return c;
    },
    createLabelDepartmentTelPhoneCombox : function(config) {
        var c = Morik.Office.CommonCombox
                .createDepartmentTelPhoneCombox(Ext.applyIf(config || {}, {
                    fieldLabel : '部门电话',
                    name : 'departmentTelphone',
                    anchor : '98%',
                    model : 'local',
                    selectOnFocus : true
                }));

        return c;
    }

}

}();