`
wangjianjun852
  • 浏览: 50051 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

求EXTJS combo 下拉tree 实例,谢谢

阅读更多
求EXTJS combo  下拉tree 实例,谢谢
求EXTJS combo  下拉tree 实例,谢谢
求EXTJS combo  下拉tree 实例,谢谢
求EXTJS combo  下拉tree 实例,谢谢


E-MAIL:441667111@qq.com


Ext.onReady(function(){
 
//定义数据集对象
var typeStore = new Ext.data.Store({//配置分组数据集
//autoLoad :true,
reader: new Ext.data.XmlReader({
totalRecords: "results",
record: "Organization", 
id: "id"
},  
Ext.data.Record.create([
{name: 'id'},
{name: 'name'},     
{name: 'sn'},
{name:'createDate'},
{name : 'description'},
{name : 'parent'}
])
),
proxy : new Ext.data.HttpProxy({
url : 'sys/orga!getOrgList'
})
})
//创建工具栏组件
var toolbar = new Ext.Toolbar([
{text : '新增用户',iconCls:'add',handler : showAddUsersType},
'-',
{text : '修改用户',iconCls:'option',handler : showModifyUsersType},
'-',
{text : '删除用户',iconCls:'remove',handler : showDeleteUsersType}
]);
//创建Grid表格组件
var cb = new Ext.grid.CheckboxSelectionModel()
var usersGrid = new Ext.grid.GridPanel({
applyTo : 'grid-div',
tbar : toolbar,
frame:true,
store: typeStore,
viewConfig : {
autoFill : true
},
sm : cb,
columns: [//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),//表格行号组件
cb,
{header: "编号", width: 80, dataIndex: 'id', sortable: true,hidden:true},
{header: "姓名", width: 180, dataIndex: 'name', sortable: true},
{header: "密码", width: 280, dataIndex: 'sn', sortable: true},
{header: "注册日期", width: 280, dataIndex: 'createDate', sortable: true},
{header: "description", width: 280, dataIndex: 'description', sortable: true},
{header: "parent", width: 280, dataIndex: 'parent', sortable: true}
],
bbar: new Ext.PagingToolbar({
        pageSize: 15, 
        store: typeStore,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg: "没有记录"
    })
    });
typeStore.load({params:{start:0, limit:15}});
//创建新增或修改用户类型信息的form表单
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
var usersForm = new Ext.FormPanel({
labelSeparator : ":",
frame:true,
border:false,
items : [
{
xtype:'textfield',
width : 200,
allowBlank : false,
blankText : '类型名称不能为空',
name : 'username',
fieldLabel:'姓名'
},{
xtype:'textfield',
width : 200,
name : 'password',
fieldLabel:'密码'
},{
xtype:'combo',
width : 200,
allowBlank : false,
blankText : '必须选择支出类型',
hiddenName : 'payTypeId',
name : 'typeName',
store : new Ext.data.Store({
autoLoad :true,
reader: new Ext.data.XmlReader({
totalRecords: "results",
record: "Organization",
id: "id"
},
Ext.data.Record.create([
{name: 'id'},
{name: 'sn'},
{name: 'name'}
])
),
proxy : new Ext.data.HttpProxy({
url : 'sys/orga!getTree'
})
}),//设置数据源
allQuery:'allpay',//查询全部信息的查询字符串
triggerAction: 'all',//单击触发按钮显示全部数据
editable : false,//禁止编辑
loadingText : '正在加载支出类型信息',//加载数据时显示的提示信息
displayField:'name',//定义要显示的字段
valueField : 'id',
emptyText :'请选择支出类型',
mode: 'remote',//远程模式
fieldLabel:'类型'
},{
                xtype:"combo", 
                fieldLabel: '选择', 
                name: 'combo', 
                id:'combotree', 
                 store: new Ext.data.SimpleStore({fields:[],data:[[]]}), 
                 editable:false,//是否可编辑的表格 
                 selectClass:'',//适用于所有样式 
                 mode: 'local',   //本地数据 
                 triggerAction:'all',  //是否自动匹配 
                 hiddenName:"val", 
                 //valueField:'val', 
                 maxHeight: 220, 
                 autoHeight: true, 
                 tpl: '<tpl for="."><div style="height:220px; width:158px; overflow:auto"><div id="tree"></div></div></tpl>',   //模板 循环 
                 emptyText:'请选择' 
}

],
buttons:[
{
text : '关闭',
handler : function(){
win.hide();
}
},{
text : '提交',
handler : submitForm
}
]
});
//创建弹出窗口
var win = new Ext.Window({
layout:'fit',
    width:380,
    closeAction:'hide',
    height:200,
resizable : false,
shadow : true,
modal :true,
    closable:true,
    bodyStyle:'padding:5 5 5 5',
    animCollapse:true,
items:[usersForm]
});
//显示新建用户类型窗口
function showAddUsersType(){
usersForm.form.reset();
usersForm.isAdd = true;
win.setTitle("新增用户信息");
win.show();
}
//显示修改用户类型窗口
function showModifyUsersType(){
var usersList = getUsersIdList();
var num = usersList.length;
if(num > 1){
Ext.MessageBox.alert("提示","每次只能修改一条用户信息。")
}else if(num == 1){
usersForm.isAdd = false;
win.setTitle("修改用户信息");
win.show();
var usersId = usersList[0];
loadForm(usersId);
}
}
//显示删除用户对话框
function showDeleteUsersType(){
var usersList = getUsersIdList();
var num = usersList.length;
if(num > 1){
Ext.MessageBox.alert("提示","每次只能删除一条用户信息。")
}else if(num == 1){
Ext.MessageBox.confirm("提示","您确定要删除所选用户吗?",function(btnId){
if(btnId == 'yes'){
var usersId = usersList[0];
deleteUsers(usersId);
}
})
}
}
//删除用户类型
function deleteUsers(usersId){
var msgTip = Ext.MessageBox.show({
title:'提示',
width : 250,
msg:'正在删除用户信息请稍后......'
});
Ext.Ajax.request({
url : 'sys/suser!deleteUsers',
params : {usersId : usersId},
method : 'POST',
success : function(response,options){
msgTip.hide();
var result = Ext.util.JSON.decode(response.responseText);
if(result.success){
//服务器端数据成功删除后,同步删除客户端列表中的数据
var index = typeStore.find('id',usersId);
if(index != -1){
var rec = typeStore.getAt(index)
typeStore.remove(rec);
}
Ext.Msg.alert('提示','删除用户信息成功。');
}else{
Ext.Msg.alert('提示','该用户已包含'+result.num+'本用户信息不能删除!');
}
},
failure : function(response,options){
msgTip.hide();
Ext.Msg.alert('提示','删除用户类型请求失败!');
}
});
}
//加载表单数据
function loadForm(usersId){
usersForm.form.load({
waitMsg : '正在加载数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'sys/suser!getUsersById',//请求的url地址
params : {usersId:usersId},
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
//Ext.Msg.alert('提示','数据加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','数据加载失败');
}
});
}
//提交表单数据
function submitForm(){
//判断当前执行的提交操作,isAdd为true表示执行用户类型新增操作,false表示执行用户类型修改操作
if(usersForm.isAdd){
//新增用户信息
usersForm.form.submit({
clientValidation:true,//进行客户端验证
waitMsg : '正在提交数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'sys/suser!add',//请求的url地址
method:'POST',//请求方式
success:function(form,action){//加载成功的处理函数
win.hide();
updateUsersList(action.result.usersId);
Ext.Msg.alert('提示','新增用户成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','新增用户失败');
}
});
}else{
//修改用户信息
usersForm.form.submit({
clientValidation:true,//进行客户端验证
waitMsg : '正在提交数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'sys/suser!modifyUsers',//请求的url地址
method:'POST',//请求方式
success:function(form,action){//加载成功的处理函数
win.hide();
updateUsersList(action.result.UsersId);
Ext.Msg.alert('提示','修改用户成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','修改用户失败');
}
});
}
}
//明细数据修改后,同步更新用户列表信息
function updateUsersList(usersId){
var fields = getFormFieldsObj(usersId);
var index = typeStore.find('id',fields.id);
if(index != -1){
var item = typeStore.getAt(index);
for(var fieldName in fields){
item.set(fieldName,fields[fieldName]);
}
typeStore.commitChanges();
}else{
var rec = new Ext.data.Record(fields);
typeStore.add(rec);
}
}
//取得表单数据
function getFormFieldsObj(usersId){
var fields = usersForm.items;
var obj = {};
for(var i = 0 ; i < fields.length ; i++){
var item = fields.itemAt(i);
var value = item.getValue();
obj[item.name] = value;
}
if(Ext.isEmpty(obj['id'])){
obj['id'] = usersId;
}
return obj;
}
//取得所选用户
function getUsersIdList(){
var recs = usersGrid.getSelectionModel().getSelections();
var list = [];
if(recs.length == 0){
Ext.MessageBox.alert('提示','请选择要进行操作的用户!');
}else{
for(var i = 0 ; i < recs.length ; i++){
var rec = recs[i];
list.push(rec.get('id'))
}
}
return list;
}

});


已经不知道该怎么写了。。 哪位大哥, 麻烦告诉下思路, 或是有时间的话, 直接帮忙改一下。  非常感谢, 感谢感谢。!!!!!
分享到:
评论
3 楼 wangjianjun852 2010-11-06  
哥们, 可以给个email 或QQ么。 我的E-MAIL  441667111@qq.com  我想请教一下关于extjs combo 里面挂tree 的问题。
2 楼 fangzhouxing 2010-11-03  
看这里:http://www.sencha.com/forum/showthread.php?27269-2.x-ComboBox-Tree/page3
1 楼 fangzhouxing 2010-11-03  
我有现成的

相关推荐

    Extjs tree实例【源代码】

    ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...

    Extjs4 下拉树 TreeCombo

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

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    Extjs6 下拉列表

    综上所述,ExtJS6的下拉列表(ComboBox)和GridCombo扩展控件提供了强大的功能和灵活性,它们可以用于创建丰富的用户界面,满足各种复杂的业务需求。理解和熟练掌握这些组件的使用,对于开发高质量的Web应用至关重要...

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    ExtJs3下拉树

    ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...

    extjs2.0 下拉列

    在描述中提到了 "extjs下拉树",这可能是指 `Ext.tree.TreePanel` 结合 `TreeStore` 来实现的下拉树结构。下拉树允许用户从一个下拉框中选择一个树形结构的节点。实现方式是在 `ComboBox` 的配置中添加一个 `tree` ...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

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

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    Extjs 4.1 下拉框 Tree 的实现(mvc)

    本文将深入探讨如何在ExtJS 4.1环境中利用MVC架构实现一个功能丰富的下拉框(Tree ComboBox),并结合具体代码示例进行详细解析。 ### ExtJS 4.1 下拉框Tree实现(MVC) #### 1. MVC架构简介 MVC,即Model-View-...

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

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

    ExtJs下拉树

    - **渲染:** 下拉树的视图部分由Ext.view.Tree实现,它将数据模型转化为可视化的树结构。 - **交互:** 用户选择节点时,可以选择单个或多个,选择结果会显示在输入框中,同时可以通过监听事件来处理用户的选中...

    extjs表单中的下拉框(comobobox)手动添加空选项

    ### ExtJS表单中的下拉框(ComboBox)手动添加空选项 在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它...

    extjs 弹窗的简单实例

    在“extjs 弹窗的简单实例”中,我们将探讨如何在ExtJS中创建和使用弹窗。 首先,理解ExtJS中的Window组件。Window是浮动的、可拖动的容器,通常用于显示临时信息或进行独立的操作。创建一个窗口,你需要定义一个...

    Extjs实现下拉菜单效果

    在本篇文章中,我们将详细了解如何使用ExtJS框架实现具有下拉树功能的下拉菜单效果。ExtJS是一个成熟的JavaScript框架,用于创建交互式的Web应用程序,提供了一整套丰富的用户界面组件,其下拉树组件是其众多组件之...

    extjs下拉树

    3. **创建下拉树组件**:使用`Ext.create`方法创建`Ext.form.field.Tree`实例,并设置配置项,如数据源、显示字段、展开节点等。 ```javascript var treeComboBox = Ext.create('Ext.form.field.Tree', { ...

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载

Global site tag (gtag.js) - Google Analytics