Extjs实现下拉菜单效果


Posted in Javascript onApril 01, 2016

本文实例为大家分享了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中?

效果:

Extjs实现下拉菜单效果

下面是另一个:

<!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>

效果:

Extjs实现下拉菜单效果

以上就是本文的全部内容,希望对大家学习javascript有所帮助。

Javascript 相关文章推荐
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
javascript继承机制实例详解
Nov 20 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
javascript每日必学之继承
Feb 23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 #Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
JS中frameset框架弹出层实例代码
Apr 01 #Javascript
You might like
php文件怎么打开 如何执行php文件
2011/12/21 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python urlopen()函数 示例分享
2014/06/12 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
经济管理专业自荐信
2013/12/30 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
社区工作者先进事迹
2014/01/18 职场文书
小班评语大全
2014/05/04 职场文书
农业开发项目建议书
2014/05/16 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
个人优缺点总结
2015/02/28 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
golang实现浏览器导出excel文件功能
2022/03/25 Golang