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 验证码的实例代码(附效果图)
Mar 22 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
js查找父节点的简单方法
2008/06/28 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python算法题 链表反转详解
2019/07/02 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
班主任新年寄语
2014/04/04 职场文书
家长写给孩子的评语
2014/04/18 职场文书
投标服务承诺书
2014/05/28 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
英语复习计划
2015/01/19 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python