我再一张页面里写了一个下拉框，在同一张页面里的另外一个地方也要用到它，想知道下怎么能把它重用！
有两二种方法：一是继承。
我在项目的做法是放在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 : '
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;
}
}
}();
这种方式比直接继承好多，我开始是用继承的方式，发现很乱，就改成这种方式，这种方式是可配置修改属性的。希望对你有用。