`
天空之城
  • 浏览: 405547 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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);
    }
});

 

效果图：

分享到：
| SQL语句递归查找
评论
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  
我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs4 实现下拉树并支持复选

    在EXTJS4中，实现一个下拉树（Combobox Tree）并支持多选和复选功能，主要是通过自定义组件（Ext.define）来完成的。这个组件继承自EXTJS的Picker字段（Ext.form.field.Picker），并添加了树形结构和复选功能。以下...

    ExtJs4实现下拉树选择框ComboTree

    ### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树（TreeCombo）是一种组合控件，它将传统的下拉框与树形结构结合在一起，提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用，例如在需要用户选择分类或者层级结构的场景中...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下，我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree，它在ExtJS4中实现了单选和多选功能，并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性，...

    Extjs4 多选下拉树

    在ExtJS4中，多选下拉树（Multi Select Tree）是一种用户界面组件，它结合了下拉菜单和树形结构，允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时，我们...

    ExtJs下拉树

    - **ComboBoxTree.js:** 这是实现下拉树功能的主要JavaScript文件，它定义了自定义的ComboBoxTree组件，包含了构造函数、配置项、方法等，用于创建和操作下拉树。 - **ComboBoxTree-min.js:** 这是压缩后的版本，...

    ExtJS3 实现异步下拉树

    7. **扩展控件**：可能需要创建一个新的组件类，继承自`Ext.form.field.ComboBox`，并覆盖或扩展其默认行为，以实现下拉树的功能。 8. **配置项**：例如，`displayField`定义显示字段，`valueField`定义值字段，`...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    - 要实现下拉菜单树，你需要创建一个ComboBox，然后在它的下拉部分嵌入一个TreePanel。 - 这可以通过定义ComboBox的`store`属性为一个TreeStore，同时配置`displayField`来决定显示哪个字段，`valueField`来保存...

    Extjs6中利用treePicker实现的下拉树中

    利用extjs6自带的treePicker插件，实现下拉树的效果

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中，下拉树组件（TreeComboBox）是一种特殊的组合框，它结合了下拉列表和树形结构的功能，允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...

    Extjs下拉多选树

    1. **下拉树组件**：在ExtJS中，树形组件（TreePanel）用于展示层次结构的数据。它支持动态加载、拖放操作、节点展开和折叠等功能。而下拉树是将树形结构嵌入到下拉框中，通常用于选择一组相关的项目，比如文件夹...

    extjs下拉树

    在ExtJS中，下拉树是通过`Ext.form.field.Tree`类实现的，它继承自`Ext.form.field.ComboBox`，增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件，包含了一些定制化的代码或扩展。 ...

    Extjs4 下拉树( v1.0版本有bug，已经上传一个可以用的)

    标题中的“Extjs4 下拉树”指的是EXTJS框架中的一个组件，用于实现下拉菜单与树形结构的结合，这种组件通常在需要选择层级结构数据时非常有用，比如地区选择、组织架构选择等。EXTJS是Sencha公司开发的一个...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树：深入解析与实现 在现代Web开发中，Extjs作为一款功能强大且灵活的框架，深受开发者喜爱。它提供了丰富的UI组件库，能够帮助开发者快速构建复杂的用户界面。其中，自定义组件是Extjs...

    Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用

    综上所述，ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具，它结合了下拉框的简洁和树结构的层次感，提供了丰富的定制选项，能满足多种场景下的需求。理解并熟练掌握其用法，将极大地提升开发效率和用户...

    Extjs实现下拉菜单效果

    通过以上详细分析，可以得出ExtJS实现下拉树组件的要点和步骤。开发者可以根据实际需求，修改和扩展上述代码，创建满足特定业务逻辑的下拉树。此外，文章中提到的ExtJS下拉树组件在展示和交互上的应用，不但增强了...

    extjs树形下拉框treeField

    extjs 树形下拉列表框，可以进行数据选择，数据回显。

    ExtJS下拉列表树控件

    在ExtJS中，下拉列表树控件（ComboBox Tree）是常见的组件之一，它结合了下拉列表和树结构，提供了更丰富的用户界面。这个控件允许用户从一个层级化的数据结构中进行选择，非常适合于展示有层次关系的数据。 在创建...

    ExtJS下拉列表树控件1

    描述中提到的链接指向了一个博客文章，虽然描述本身是空的，但我们可以推测博主可能分享了关于如何在ExtJS中实现下拉列表树的具体步骤或代码示例。通常，这种类型的教程会涵盖如何创建树节点，如何将它们与下拉列表...

Magicbox
Global site tag (gtag.js) - Google Analytics