Extjs实现下拉菜单效果
本文实例为大家分享了Extjs实现下拉树效果，供大家参考，具体内容如下
<!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:'一级节点',expanded: true, checked:false ,
children:[
{ text:'二级节点1',leaf:true,checked:false},
{ text:'二级节点2',leaf:true,checked:false}
]
} ,
{
text:'一级节点',expanded: true, checked:false ,
children:[
{ text:'二级节点1',leaf:true,checked:false},
{ text:'二级节点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; //获取主节点
var childnodes = node.childNodes; //获取zi节点
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; //半选中状态
this.setValue(this._txtValue = rec.get('text'));
//this.collapse();//关闭tree
}
},this);
},
});
//实例化下拉树
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>
问题：当选中复选框时候，如何使全部选中的条目添加显示到combobox中？
效果：
下面是另一个：
<!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>
效果：
以上就是本文的全部内容，希望对大家学习javascript有所帮助。
相关推荐
-
Extjs grid panel自带滚动条失效的解决方法
之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效. 取个实例,EXTJS gridPanel自带的滚动条,是有一个固定的列宽来放置这个scrollbar的,如上图所示.所以当这个scrollbar失效的时候,无论你怎么拖动这个滚动条,grid中的数据永远都不会随scrollbar的移动而展示相应区域的数据(换句话说就是你永远看到的数据都是截图中的这几条record). 至于
-
ExtJs异步无法向外传值和赋值的完美解决办法
1.Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值. var testStore = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy({ url : '' }), reader : new Ext.data.JsonReader({ root : 'hstamcx', totalProperty :
-
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
遇到一个很奇怪的问题,ExtJs里的form提交创建的时候从session里取了个操作员的ID,然后在form里添加了一个xtype为hidden的组件,给它写了个value,奇怪的就出现了,在其中的一条机器上做是没有问题,换了一个机器,说什么就是不能赋值上去,搞的我老郁闷了.用了一个方法解决了此问题,但是老是感觉这样解决了很不爽,各位有没有遇到过这种问题,请指点一下. 先说说我的解决方法 给hidden组件加个ID 然后在form提交的时候 触发个方法使Ext.getCmp('ID').set
-
ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法
Extjs的Regex的验证属性分两种情况,一种是只有红色提示框:另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来. 特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来否则会报"缺少对象": 比如: 复制代码 代码如下: { xtype:'textfield', fieldLabel: '邮政编码', name:'postCode', regex: /^[1-9]\d{
-
ExtJS 4.2 Grid组件单元格合并的方法
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri
-
Extjs实现下拉菜单效果
本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resourc
-
AngularJS service之select下拉菜单效果
本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下 <!-- $watch:持续监听数据上的变化,更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
-
jquery实现简单的二级导航下拉菜单效果
本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
-
jQuery实现的导航下拉菜单效果示例
本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h
-
js实现全国省份城市级联下拉菜单效果代码
本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
-
js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:
-
js实现点击向下展开的下拉菜单效果代码
本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
JavaScript实现非常简单实用的下拉菜单效果
本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code
-
ASP模仿google suggest风格实现下拉菜单效果
今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单,直接上代码 1.前台代码: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d