Extjs實(shí)現(xiàn)下拉菜單效果
更新時(shí)間：2016年04月01日 11:58:31 投稿：lijiao
這篇文章主要為大家介紹了Extjs實(shí)現(xiàn)下拉樹的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Extjs實(shí)現(xiàn)下拉樹效果，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text8</title>
<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
<script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>
</head>
<body>
<script>
Ext.define('TreeComboBox',{
extend : 'Ext.form.field.ComboBox',
store : {
fields:[],
data:[[]]
},
width:300,
editable : false,
allowBlank:false,
multiSelect : true,
listConfig : {
resizable:false,
minWidth:150,
maxWidth:250,
},
_idValue : null,
_txtValue : null,
callback : Ext.emptyFn,
treeObj : null,
initComponent : function(){
this.treeObj=new Ext.tree.Panel({
border : false,
autoScroll : true,
rootVisible: false,
renderTo:this.treeRenderId,
root: {
text: 'root',draggable: false,expanded: true,
children:[
{
text:'一級(jí)節(jié)點(diǎn)',expanded: true, checked:false ,
children:[
{ text:'二級(jí)節(jié)點(diǎn)1',leaf:true,checked:false},
{ text:'二級(jí)節(jié)點(diǎn)2',leaf:true,checked:false}
]
} ,
{
text:'一級(jí)節(jié)點(diǎn)',expanded: true, checked:false ,
children:[
{ text:'二級(jí)節(jié)點(diǎn)1',leaf:true,checked:false},
{ text:'二級(jí)節(jié)點(diǎn)2',leaf:true,checked:false}
]
}
]
} ,
listeners:{
checkchange:function(node,state){
if(node.hasChildNodes()){
for(var i=0;i<node.childNodes.length;i++){
node.childNodes[i].set('checked',state);
}
}
}
}
});
this.treeRenderId = Ext.id();
this.tpl = "<tpl><div id='"+this.treeRenderId+"'></div></tpl>";
this.callParent(arguments);
this.on({
'expand' : function(){
if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){
Ext.defer(function(){
this.treeObj.render(this.treeRenderId);
},100,this);
}
}
});
this.treeObj.on('itemclick',function(view,rec){
/* var roonodes = this.treeObj.getRootNode().childNodes; //獲取主節(jié)點(diǎn)
var childnodes = node.childNodes; //獲取zi節(jié)點(diǎn)
if (roonodes.getView().getSelectionCount()==1) {
for(var i=0;i<childnodes.length;i++){
this.setValue(this._txtValue = rec.get('text'));
}
}*/
if(rec){
//node.getUI().checkbox.indeterminate = true; //半選中狀態(tài)
this.setValue(this._txtValue = rec.get('text'));
//this.collapse();//關(guān)閉tree
}
},this);
},
});
//實(shí)例化下拉樹
var xltree1=new TreeComboBox({
fieldLabel : '下拉樹1',
name:'xltree1111',
allowBlank:true
});
var xltree2=new TreeComboBox({
fieldLabel : '下拉樹2',
name:'xltree2222',
allowBlank:true
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 500,
bodyPadding: 10,
title: 'TreeComboBox',
items: [xltree1, xltree2]
});
</script>
</body>
</html>
問題：當(dāng)選中復(fù)選框時(shí)候，如何使全部選中的條目添加顯示到combobox中？
效果：
下面是另一個(gè)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tabpanel</title>
<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
<script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
Ext.create('Ext.window.Window',{
id: 'docaddId',
title: 'Preferences',
buttonAlign: 'center',
width:500,
layout:'fit',
//height:400,
resizable:false,
items:
Ext.create('Ext.tab.Panel', {
//renderTo: Ext.getBody(),
items: [{
title: 'A',
items:[
//Process and associated workstation下拉選框
{
xtype:'container',
fieldLabel:'Workstation',
items:[{
xtype:"combobox",
name : 'Process and associated workstation',
fieldLabel : 'Workstation',
id:'aaa',
layout:'fit',
width:480,
editable : false,
allowBlank : false,
multiSelect : true,
store : {
fields : ['workstationId', 'workstationName'],
data : [
{'workstationId':'0',workstationName:'workstation01'},
{'workstationId':'1',workstationName:'workstation02'},
{'workstationId':'2',workstationName:'workstation03'},
{'workstationId':'3',workstationName:'workstation04'}
]
},
listConfig : {
itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.workstationName]}'),
onItemSelect : function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
var checkboxs = node.getElementsByTagName("input");
if (checkboxs != null)
var checkbox = checkboxs[0];
checkbox.checked = true;
}
},
listeners : {
itemclick : function(view, record, item, index, e, eOpts) {
var isSelected = view.isSelected(item);
var checkboxs = item.getElementsByTagName("input");
if (checkboxs != null) {
var checkbox = checkboxs[0];
if (!isSelected) {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
}
}
}
},
queryMode : 'remote',
displayField : 'workstationName',
valueField : 'workstationIda',
}
]
}]
}, {
title: 'B'
}, {
title: 'C'
}, {
title: 'D'
}]
})
}).show();
});
</script>
</body>
</html>
效果：
以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)javascript有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)經(jīng)典的中國地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例【測試可用】
- js實(shí)現(xiàn)省份下拉菜單效果
- js代碼實(shí)現(xiàn)下拉菜單【推薦】
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
- 全國省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- 純JS實(shí)現(xiàn)出生日期[年月日]下拉菜單效果
相關(guān)文章
ExtJs默認(rèn)的字體大小改變的幾種方法(自己整理)
本文列出網(wǎng)上收集的幾種方法，希望對(duì)大家有用，并且做了下瀏覽器兼容，感興趣的朋友可以參考下哈2013-04-04
ExtJS的FieldSet的column列布局，需要的朋友可以參考下。2009-11-11
Extjs表單驗(yàn)證包括空驗(yàn)證、用vtype格式進(jìn)行簡單的驗(yàn)證、高級(jí)自定義密碼驗(yàn)證、使用正則表達(dá)式驗(yàn)證等等2014-03-03
Extjs學(xué)習(xí)筆記之一 初識(shí)Extjs之MessageBox
去官網(wǎng)下載好extjs的壓縮包，解壓縮之后得到如下目錄結(jié)構(gòu)。2010-01-01
這篇文章主要為大家詳細(xì)介紹了ExtJS 4.2 Grid組件的單元格合并,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本節(jié)主要介紹了extjs 如何給column 加上提示,需要的朋友可以參考下2014-07-07
ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
這篇文章主要介紹了ExtJS4如何給Combobox設(shè)置列表中的默認(rèn)值,需要的朋友可以參考下2014-05-05
ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會(huì)導(dǎo)致這兩個(gè)組件消失不見不報(bào)任何錯(cuò)誤且在其他瀏覽器正常，通過本文你將學(xué)會(huì)如何解決此問題2013-08-08
Extjs 4.x 得到form CheckBox 復(fù)選框的值
CheckBox（復(fù)選框）主要用來接收用戶選擇的選項(xiàng)，那么如何通過Extjs 4.x 得到form CheckBox的值呢？下面有個(gè)不錯(cuò)的方法，大家值得一看2014-05-05
Grid設(shè)置為autoWidth:true時(shí)在ie6下寬度為10000px2009-02-02