网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 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有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 11:31:05