|
|
Posted on 2013-03-02 21:48 小胡子 閱讀(5100) 評論(0) 編輯 收藏 所屬分類: Ext
摘要：ComboBox是常用控件之一，但由于其數據來源分兩種形式：本地和遠程，故寫的形式難度并不亞于ExtJS中的TreePanel和 GridPanel。鄙人也經常提醒自己的師弟師妹，ExtJS本身是面向對象寫的，不能在應用的時候卻不按照面向對象來寫，面向對象最起碼的好處就是代 碼的復用，對于網頁來講，代碼復用的好處就是加載的JS會少很多，這樣網頁渲染時就不會很慢。下面我將分別介紹擴展的四種ComboBox。 類圖：  擴展一：封裝的月份ComboBox組件 效果：  代碼： // 封裝的月份ComboBox組件
MonthComboBox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '月 份',// 標題名稱
storeData : null,// ComboxBox數據源(數組形式)
initComponent : function() {
this.storeData = [[1, '1月'], [2, '2月'], [3, '3月'], [4, '4月'],
[5, '5月'], [6, '6月'], [7, '7月'], [8, '8月'], [9, '9月'],
[10, '10月'], [11, '11月'], [12, '12月']];
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : '月份 ',
forceSelection : true,// 值為true時將限定選中的值為列表中的值，值為false則允許用戶將任意文本設置到字段（默認為
// false）。
selectOnFocus : true,// 值為 ture
// 時表示字段獲取焦點時自動選擇字段既有文本(默認為
// false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : this.storeData
}),
editable : false,
triggerAction : 'all',
valueField : 'value',
displayField : 'text'
});
MonthComboBox.superclass.initComponent.call(this);
}
}); 應用： var cboMonth=new MonthComboBox({
renderTo : 'monthComboBox',
width : 200
}); Html: <div id="monthComboBox"></div><br/> 擴展二：封裝的日期ComboBox組件 效果：  代碼： // 封裝的日期ComboBox組件
DayComboBox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '日 期',// 標題名稱
storeData : null,// ComboxBox數據源(數組形式)
initComponent : function() {
this.storeData = [[1, '1日'], [2, '2日'], [3, '3日'], [4, '4日'],
[5, '5日'], [6, '6日'], [7, '7日'], [8, '8日'], [9, '9日'],
[10, '10日'], [11, '11日'], [12, '12日'], [13, '13日'],
[14, '14日'], [15, '15日'], [16, '16日'], [17, '17日'],
[18, '18日'], [19, '19日'], [20, '20日'], [21, '21日'],
[22, '22日'], [23, '23日'], [24, '24日'], [25, '25日'],
[26, '26日'], [27, '27日'], [28, '28日'], [29, '29日'],
[30, '30日'], [31, '31日']];
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : '日期',
forceSelection : true,
// 值為true時將限定選中的值為列表中的值，
// 值為false則允許用戶將任意文本設置到字段（默認為false）。
selectOnFocus : true,
// 值為 ture時表示字段獲取焦點時自動選擇字段既有文本(默認為false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : this.storeData
}),
editable : false,
triggerAction : 'all',
valueField : 'value',
displayField : 'text'
});
DayComboBox.superclass.initComponent.call(this);
}
}); 應用： var cboDay=new DayComboBox({
renderTo : 'dayComboBox',
width : 200
}); Html： <div id="dayComboBox"></div><br/>
擴展三：封裝的DynamicCombox組件 效果：  代碼： //封裝的DynamicCombox組件
DynamicCombox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '動態ComboBox',// 標題名稱
baseUrl : null,
emptyText : null,
valueField : null,
displayField : null,
initComponent : function() {
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : this.emptyText || '請選擇',
forceSelection : true,
// 值為true時將限定選中的值為列表中的值，
// 值為false則允許用戶將任意文本設置到字段（默認為false）。
selectOnFocus : true,
// 值為 ture時表示字段獲取焦點時自動選擇字段既有文本(默認為false)。
mode : 'remote',
store : new Ext.data.JsonStore({
url : this.baseUrl,
root : "root",
remoteSort : true,
fields : [this.valueField,
this.displayField]
}),
editable : false,// 是否編輯
triggerAction : 'all',
valueField : this.valueField,
displayField : this.displayField,
hiddenName : this.valueField
});
DynamicCombox.superclass.initComponent.call(this);
}
}); 應用： var cboDyna=new DynamicCombox({
renderTo : 'dynamicCombox',
width:200,
baseUrl:'dynadata.json',
valueField:'value',
displayField:'display'
}); Json： {
root : [{
value : 'v1',
display : '張三'
}, {
value : 'v2',
display : '李四'
}, {
value : 'v3',
display : '王五'
}]
} Html： <div id="dynamicCombox"></div><br/>
擴展四：封裝的ComboBoxTree組件 效果：  代碼： // 封裝的ComboBoxTree組件
ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
fieldLabel : 'ComboBoxTree',// 標題名稱
baseUrl : null,
emptyText : null,
maxHeight : 300,
treeId : Ext.id() + '-tree',
tree : null,
// all:所有結點都可選中
// exceptRoot：除根結點，其它結點都可選（默認）
// folder:只有目錄（非葉子和非根結點）可選
// leaf：只有葉子結點可選
selectNodeModel : 'exceptRoot',
initComponent : function() {
var resultTpl = new Ext.XTemplate('<tpl for="."><div style="height:'
+ this.maxHeight + 'px"><div id="' + this.treeId
+ '"></div></div></tpl>');
this.addEvents('afterchange');
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : this.emptyText || '請選擇',
forceSelection : true,
selectedClass : '',
// 值為true時將限定選中的值為列表中的值，
// 值為false則允許用戶將任意文本設置到字段（默認為false）。
selectOnFocus : true,
// 值為 ture時表示字段獲取焦點時自動選擇字段既有文本(默認為false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,// 是否編輯
triggerAction : 'all',
typeAhead : false,
tpl : resultTpl,
onSelect : Ext.emptyFn()
});
ComboBoxTree.superclass.initComponent.call(this);
},
expand : function() {
ComboBoxTree.superclass.expand.call(this);
if (this.tree.rendered) {
return;
}
Ext.apply(this.tree, {
height : this.maxHeight,
border : false,
autoScroll : true
});
if (this.tree.xtype) {
this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
}
this.tree.render(this.treeId);
var root = this.tree.getRootNode();
if (!root.isLoaded()) {
root.reload();
}
this.tree.on('click', function(node) {
var selModel = this.selectNodeModel;
var isLeaf = node.isLeaf();
if ((node == root) && selModel != 'all') {
return;
} else if (selModel == 'folder' && isLeaf) {
return;
} else if (selModel == 'leaf' && !isLeaf) {
return;
}
var oldNode = this.getNode();
if (this.fireEvent('beforeselect', this, node, oldNode) !== false) {
this.setValue(node);
this.collapse();
this.fireEvent('select', this, node, oldNode);
(oldNode !== node) ? this.fireEvent('afterchange',
this, node, oldNode) : '';
}
}, this);
this.tree.expandAll();
},
setValue : function(node) {
this.node = node;
var text = node.text;
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = node.id;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node.id;
},
getValue : function() {
return typeof this.value != 'undefined' ? this.value : '';
},
getNode : function() {
return this.node;
},
clearValue : function() {
ComboBoxTree.superclass.clearValue.call(this);
this.node = null;
},
// private
destroy : function() {
ComboBoxTree.superclass.destroy.call(this);
Ext.destroy([this.node, this.tree]);
delete this.node;
}
}); 應用： var cboTree = new ComboBoxTree({
renderTo : 'comboBoxTree',
width : 200,
tree : {
xtype:'treepanel',
loader: new Ext.tree.TreeLoader({dataUrl:'treedata.json'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根結點'})
},
//all:所有結點都可選中
//exceptRoot：除根結點，其它結點都可選(默認)
//folder:只有目錄（非葉子和非根結點）可選
//leaf：只有葉子結點可選
selectNodeModel:'leaf'
}); Json： [{
id : 'root',
text : '單位庫',
leaf : false,
children : [{
id : '1002',
text : '重慶市氣象局',
checked : true,
leaf : false,
children : [{
id : '1003',
text : '機關部門',
checked : true,
leaf : true
}, {
id : '1004',
text : '天氣辦公室',
checked : true,
leaf : true
}]
},{
id : '1005',
text : '河北工業大學',
checked : false,
leaf : true
}]
}] Html： <div id="comboBoxTree"></div><br/> 原文出自： http://www.cnblogs.com/xia520pi/archive/2011/11/10/2244133.html
|