Extjs4 实现上拉树
日期：2014-05-16 浏览次数：20359 次
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);
}
});
?
效果图：
1 楼
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',
// 是否在服务端排序
remoteSor
'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',
// 是否在服务端排序
remoteSor
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
