Extjs4 实现下拉树

/*!
* @author caizhiping
* 下拉树
*/
Ext.define('keel.TreeComboBox',{
	extend : 'Ext.form.field.ComboBox',
	alias: 'widget.keeltreecombo',
	store : new Ext.data.ArrayStore({fields:[],data:[[]]}),
	editable : false,
	allowBlank:false,
	listConfig : {resizable:true,minWidth:250,maxWidth:450},
	_idValue : null,
	_txtValue : null,
	callback : Ext.emptyFn,
	treeObj : new Ext.tree.Panel({
				border : false,
				height : 250,
				//width : 350,
				autoScroll : true,
				rootVisible: false,
				store:  new Ext.data.TreeStore({
							nodeParam : 'bmjg.bmjgdm',
							proxy: {
					            type: 'ajax',
					         	url: '/fs/actions/bmjgtree!ajaxTreeforCombobox',
					            reader: 'json'
					        },
					        autoLoad : false,
					        root: {
					        	  name : 'GT',
					              id: pbmjgdm,
					              expanded: true
					        }
						})
	}),
	initComponent : function(){
		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);
		        	},300,this);
			    }
			}
		});
		this.treeObj.on('itemclick',function(view,rec){
			if(rec){
				this.setValue(this._txtValue = rec.get('text'));
				this._idValue = rec.get('id');
				//设置回调
                this.callback.call(this,rec.get('id'), rec.get('text'));
                //关闭tree
				this.collapse();
			}
		},this);
	},
	getValue : function(){//获取id值
		return this._idValue;
	},
	getTextValue : function(){//获取text值
		return this._txtValue;
	},
	setLocalValue : function(txt,id){//设值
		this._idValue = id;
		this.setValue(this._txtValue = txt);
	}
});

 

 

调用：

 

/**下拉机构数*/
var xltree=new keel.TreeComboBox({
    fieldLabel : '部门机构',
    name:'BMJGJC',
    anchor:'95%',
    //allowBlank:false,
    callback:function(id,text){
    	    //赋值给隐藏域
    		T_RY_NEW_FORM.getForm().findField("BMJGDM").setValue(id);
    }
}); 

 

效果图：

评论

8 楼 chenhua1228 2014-11-18  

请问能不能发一下后台代码呢？

7 楼 剑锋凛冽 2012-07-22  

我在参考您的文章进行下拉树的异步刷新时，总是出现重复很多次的请求，而且对后端返回的JSON对象好像前端做了什么处理，总是看不到叶子节点

6 楼 a3049967 2012-06-26  

我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？

5 楼 haige409 2012-04-28  

//赋值给隐藏域 
T_RY_NEW_FORM.getForm().findField("BMJGDM").setValue(id); 

大哥能不能写完整点？上面的东东是从哪冒出来的

4 楼 gcxyshiyu 2012-04-18  

点击第一次正常，点击第二次就被遮挡了

3 楼 gcxyshiyu 2012-04-18  

贴上代码，帮忙看看，我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？

2 楼 gcxyshiyu 2012-04-18  

Ext.require([ 'Ext.tree.*', 'Ext.tip.*', 'Ext.grid.*', 'Ext.toolbar.Paging',
'Ext.util.*', 'Ext.data.*' ]);
var micolor = 'color:blue;';
Ext.onReady(function() {
Ext.QuickTips.init();
var tree = Ext.create('Ext.tree.Panel', {
region : 'west',
store : treeStore,
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop'
}
},
width : 150,
title : '<span style="font-weight:normal">功能菜单</span>',
useArrows : false,
listeners : {
'itemclick' : function(view, record, item, index, e) {
var id = record.get('id');
var text = record.get('text');
var leaf = record.get('leaf');
// xltree.setLocalValue(text, id);
},
scope : this
}
});
// tree.expandAll();
Ext.define('MyData', {
extend : 'Ext.data.Model',
fields : [ 'id', 'name', 'parentId', 'parentName'
// 第一个字段需要指定mapping，其他字段，可以省略掉。
, 'icon', 'url', 'iconCls', {
name : 'sortNo',
type : 'int'
}, 'authority', 'type', 'remark' ]
});

// 创建数据源
var store = Ext.create('Ext.data.Store', {
// 分页大小
pageSize : 5,
model : 'MyData',
// 是否在服务端排序
remoteSort : true,
proxy : {
// 异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type : 'ajax',
url : 'menu!list.action',

reader : {
root : 'items',
totalProperty : 'total'
},
simpleSortMode : true
},
sorters : [ {
// 排序字段。
property : 'sortNo'
// 排序类型，默认为 ASC
// direction : 'DESC'
} ]
});

/** 下拉机构数 */
var xltree = new Ext.ux.TreeComboBox({
fieldLabel : '上级菜单',
name : 'parentName',
id : 'parentName',
anchor : '99%',
blankText : '菜单名称不能为空',
labelStyle : micolor,
allowBlank : false,
callback : function(id, text) {
// 赋值给隐藏域
form.form.findField("parentId").setValue(id);
}
});
// xltree.setLocalValue('2222', '0');
var form = Ext.create('Ext.form.Panel', {
border : false,
bodyPadding : 10,
defaultType : 'textfield',// 设置表单字段的默认类型
bodyStyle : 'padding:5 5 0',// 表单边距
frame : false,
fieldDefaults : {
// labelStyle : 'font-weight:bold',
labelAlign : 'right',
labelWidth : 70
},
defaults : {
margins : '0 0 10 0'
},
items : [ {
id : 'id',
name : 'id',
hidden : true
}, {
// xtype : 'textfield',
fieldLabel : '菜单名称',
blankText : '菜单名称不能为空',
labelStyle : micolor,
allowBlank : false,
name : 'name',
id : 'name',
anchor : '99%'
// width : 225
}, {
id : 'parentId',
name : 'parentId',
hidden : true
}, xltree, /*
* { // xtype : 'textfield', fieldLabel : '上级菜单', blankText :
* '上级菜单名称不能为空', allowBlank : false, labelStyle : micolor,
* name : 'parentName', id : 'parentName', // width : 225
* anchor : '99%' },
*/{
xtype : 'textfield',
fieldLabel : '请求地址',
// blankText : '菜单名称不能为空',
// allowBlank : false,
name : 'url',
id : 'url',
// width : 225
anchor : '99%'
}, {
fieldLabel : '图标CSS类',
name : 'iconCls',
id : 'iconCls',
allowBlank : true,
anchor : '99%'
}, {
fieldLabel : '图标文件',
name : 'icon',
id : 'icon',
allowBlank : true,
anchor : '99%'
}, {
fieldLabel : '备注',
name : 'remark',
id : 'remark',
allowBlank : true,
anchor : '99%'
} ]
});
function createNewWin(config) {
var win = Ext.create('Ext.window.Window', {
width : 420,
height : 285,
title : config.title,
closeAction : 'close',
// closable : false,
layout : 'fit',
modal : true,
plain : true,
resizable : false,
items : form,
buttons : [ {
text : '保存',
handler : function() {
if (form.getForm().isValid()) {
form.getForm().submit({
clientValidation : true,
waitMsg : '请稍后',
waitTitle : '正在验证登录',
url : 'login!login.action',
method : 'post',
success : function(form, action) {

},
failure : function(form, action) {
Ext.Msg.show({
width : 150,
title : "提示",
buttons : Ext.Msg.OK,
msg : action.result.msg,
icon : Ext.Msg.ERROR
})
}
});

}
}
}, {
text : '取消',
handler : function() {
win.close();
}
} ]
});
return win;
}

// 创建多选
var selModel = Ext.create('Ext.selection.CheckboxModel');
// 创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel', {
region : 'center',
title : '<span style="font-weight:normal">菜单信息表</span>',
// width : 300,
// height : 150,
// border:false,
frame : true,
store : store,
selModel : selModel,
columnLines : false,
columns : [/*
* { xtype: 'rownumberer', text: '行号', width: 35 },
*/
{
text : "菜单名称",
width : 120,
dataIndex : 'name',
sortable : false,
flex : 1
}, {
text : "上级菜单名称",
width : 200,
dataIndex : 'parentName',
sortable : false
}, {
text : "请求地址",
width : 100,
dataIndex : 'url',
sortable : true
}, {
text : "菜单图标",
width : 100,
dataIndex : 'cls',
sortable : false
}, {
text : "菜单图标CSS",
width : 100,
dataIndex : 'iconCls',
sortable : true
}, {
text : "备注",
width : 100,
dataIndex : 'remark',
sortable : true
} ],
// 值为TRUE，表示禁止选择
disableSelection : false,
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : true
},
dockedItems : [ {
xtype : 'pagingtoolbar',
store : store,
// same store GridPanel is using
dock : 'bottom',
// 分页 位置
emptyMsg : '没有数据',
displayInfo : true,
displayMsg : '显示 {0} - {1} 条，共计 {2} 条'
// bStr: '每页',
// aStr: '条',p[;l;'

// beforePageText : '第',
// afterPageText : '页/共{0}页'
}, {
xtype : 'toolbar',
items : [ {
// iconCls : 'icon-add',
icon : '/invoicing/images/add.png',
text : '新增',
scope : this,
// 添加
handler : function() {
form.form.reset();
var win = createNewWin({
id : '',
title : '新增菜单'
});
win.show();
}
}, {
// iconCls : 'icon-add',
icon : '/invoicing/images/edit.png',
text : '修改',
scope : this,
// 修改
handler : function() {
var rows = grid.getSelectionModel().getSelection();
if (rows.length == 0) {
wzq.Msg.info("请选择要修改的记录!");
return;
}
var row = rows[0];
form.form.setValues(row.data);
var win = createNewWin({
id : '',
title : '修改菜单'
});
win.show();
}
}, {
// iconCls : 'icon-delete',
icon : '/invoicing/images/delete.png',
text : '删除',
// disabled: true,
itemId : 'delete',
scope : this,
handler : function() {
// var selModel = grid.getSelectionModel();
var selected = grid.getSelectionModel().getSelection();
var Ids = []; // 要删除的id
Ext.each(selected, function(item) {
Ids.push(item.data.id); // id 对应映射字段
})
// alert(Ids);
}
} ]
} ]
// bbar : Ext.create('Ext.PagingToolbar', {
// store : store,
// displayInfo : true,
// displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
// emptyMsg : "没有数据"
// })
});
store.loadPage(1);
/**
* Viewport
*/
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [ tree, grid ]
});
});

1 楼 gcxyshiyu 2012-04-18  

我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？