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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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 XML数据解析代码
2010/05/26 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JS实现小星星特效
2019/12/24 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
Python 正则表达式操作指南
2009/05/04 Python
基于Python的接口测试框架实例
2016/11/04 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python中six模块基础用法
2019/12/08 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
销售文员的岗位职责
2013/11/20 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
领导班子对照检查材料
2014/09/22 职场文书
工会积极分子个人总结
2015/03/03 职场文书
微信搭讪开场白
2015/05/28 职场文书
导师鉴定意见
2015/06/05 职场文书
严以用权学习心得体会
2016/01/12 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Pillow图像处理库安装及使用
2022/04/12 Python