关于extjs ComboBoxTree 在form中传值的修订

最新推荐文章于 2018-07-04 14:14:55 发布

原创最新推荐文章于 2018-07-04 14:14:55 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

本文介绍如何使用ExtJS中的ComboBoxTree组件实现地理位置的选择功能。通过设置ComboBoxTree的属性和监听点击事件，可以实现在表单中选择树节点内容，并将节点ID传到后台。此外，还详细介绍了如何配置ComboBoxTree的显示与隐藏字段。

网上有很多extjs,comboxtree的例子,但在form中传值,如何前台显示treenode的内容,往后台传treenode的id?

首先创建Ext.form.ComboBoxTree ,

cmb.ownerCt.items.itemAt(0).setValue(node.getPath().slice(3));

,意思就是当选中时,将path传给form中他前面的那个隐藏域

Ext.form.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
        store: new Ext.data.SimpleStore({ fields: [], data: [[]] }),
        editable: false,
        width:300,
        shadow: false,
        //id:'shacomtree',
        mode: 'local',
        triggerAction: 'all',
        selectedClass: '',
        onSelect: null,
        canCollapse: true,
        constructor: function(_cfg) {
            if (_cfg == null) {
                _cfg = {};
            }
            Ext.apply(this, _cfg);
            this.treerenderid = Ext.id();
            this.tpl = String.format('<tpl for="."><div style="height:200px"><div id="ext-combobox-tree{0}"></div></div></tpl>', this.treerenderid);
            Ext.form.ComboBoxTree.superclass.constructor.apply(this, arguments);
            if (this.tree) {

                var cmb = this;
                this.tree.on('click', function(node) {
                    //alert("tree click");
                    cmb.canCollapse = true;
                    if (Ext.isFunction(cmb.onSelect)) {
                        cmb.onSelect(cmb, node);                        
                    } else {
                       cmb.setValue(node.text);
cmb.ownerCt.items.itemAt(0).setValue(node.getPath().slice(3));
                        if (cmb.hiddenField) {
                            cmb.hiddenField.value = node.id;
                        }
                    }
                    cmb.collapse();
                });
                
               


                      
                //以下事件，让combobox能正常关闭
                this.tree.on('expandnode', function() { cmb.canCollapse = true; });
                this.tree.on('beforeload', function() { cmb.canCollapse = false; });
                this.tree.on('beforeexpandnode', function() { cmb.canCollapse = false; });
                this.tree.on('beforecollapsenode', function() { cmb.canCollapse = false; });
            }
            this.on('expand', this.expandHandler, this);
            this.on('collapse', this.collapseHandler, this);
        },
        expandHandler: function expand() {
        	//alert("dongdong1");
            this.canCollapse = true;
            if (this.tree) {
                this.tree.render('ext-combobox-tree' + this.treerenderid);
                this.canCollapse = true;         
                this.tree.getRootNode().expand();
               
            }
        },
        collapseHandler: function collapse() {
        	//alert("dongdong2");
        	Ext.getCmp('ksjs').setValue('');
            if (!this.canCollapse) {
                this.expand();
            }
        }
   
});

在form中这样用

var turnckForm = new Ext.form.FormPanel({
		title: '查询条件',
		labelAlign: 'right',
		labelWidth: 90,
		frame: true,
		renderTo: "turnckForm",
		bodyStyle: 'padding: 0 0 0 0;',
		style: 'padding:0 0 0 0;',
		width: '100%',
		buttonAlign : "center",
		items: [
			{
				layout:'column',
				items:[
					{
						columnWidth:.5,
		                layout: 'form',
		                items:
		                [{xtype:'hidden',name:'testa',id:'testa',value:'ddd'},
						new Ext.form.ComboBoxTree({
		            		name:'usertype',
		                    hiddenName:'usertype',
		                    fieldLabel:'地理位置',
		                    tree:  new Ext.tree.TreePanel({
		                        root: new Ext.tree.AsyncTreeNode({ text: '--选择--', id: '0' }),
		                        rootVisible: false,
		                        border: false,
		                        width:300,
		                        dataUrl: 'ShowDeptMenu?action=show&limit=1',
		                        root:new Ext.tree.AsyncTreeNode({text: 'root2',id:'0'})
		                    })
		                  })
		                  ]
					},
					{
						columnWidth:.5,
		                layout: 'form',
		                items:[{
			                xtype: 'combo',
			                typeAhead: true,
			                triggerAction: 'all',
			                lazyRender:true,
			                mode: 'local',
			                store: new Ext.data.ArrayStore({
			                    id: 0,
			                    fields: [
			                        'myId',
			                        'displayText'
			                    ],
			                    data: [[1, 'item1'], [2, 'item2']]
			                }),
			                valueField: 'myId',
			                displayField: 'displayText',
			                listeners:{
			                  	'focus' : function(fld){
		                	alert(turnckForm.findById('testa').getValue());
			                  	
			                  }  
			                }
		                
						}]
					}
					]
			}
			]
	});

这时隐藏的testa将会有值