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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 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 JSON 数据解析代码
2010/05/26 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python动态加载模块的3种方法
2014/11/22 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
企业授权委托书范本
2014/04/02 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
解除同居协议书
2015/01/29 职场文书
赞美教师的句子
2019/09/02 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
MySQL视图概念以及相关应用
2022/04/19 MySQL