最近初学EXTJS,有很多不懂的问题,求大神解答,谢谢!
这是我的grid:
/** 基本信息-表格 */
role.grid = new Ext.grid.GridPanel({
title : '功能列表',
store : role.store,
colModel : role.colModel,
selModel : role.selModel,
tbar : role.tbar,
bbar : role.bbar,
autoScroll : 'auto',
region : 'east',
loadMask : true,
width:'70%',
//autoExpandColumn :'roleDesc',
stripeRows : true,
listeners : {
'cellclick' : function(obj, rowIndex, columnIndex, e) {
var record = role.grid.getSelectionModel().getSelected();
if (record) {
role.treePanel.enable();
// 先清空已选择的状态
role.clearTreeNodeCheckFun(role.treePanel.root, false);
// 当前选择用户的资源信息
Share.AjaxRequest({
url : role.myModules + record.data.roleId,
callback : function(json) {
// 勾选资源树的checkbox
if (json.length > 0) {
for (var i = 0; i < json.length; i++) {
moduleId = json[i].moduleId;
var treeNode = role.treePanel.getNodeById("_authority_" + moduleId);
if(treeNode)
treeNode.getUI().checkbox.checked = true;
}
}
}
});
}
}
},
viewConfig:{}
});
/** 基本信息-详细信息的form */
role.formPanel = new Ext.form.FormPanel({
frame : false,
title : '功能信息',
bodyStyle : 'padding:10px;border:0px',
labelwidth : 70,
defaultType : 'textfield',
items : [{
xtype : 'hidden',
fieldLabel : 'ID',
name : 'roleId',
anchor : '99%'
}, {
fieldLabel : '功能名称',
maxLength : 64,
allowBlank : false,
name : 'roleName',
anchor : '99%'
}, {
xtype : 'textarea',
fieldLabel : '功能描述',
maxLength : 128,
height : 100,
name : 'roleDesc',
anchor : '99%'
}]
});
下面的是treePanel:
role.treePanel = new Ext.tree.TreePanel({
title : '系统模块',
region : 'center',
split : true,
minSize : 200,
maxSize : 900,
useArrows : true,
autoScroll : true,
width : '20%',
animate : true,
enableDD : true,
containerScroll : true,
rootVisible : false,
buttonAlign : 'left',
frame : false,
disabled : true,
root : {
nodeType : 'async'
},
dataUrl : role.allModules,
listeners:{//下面这段话就是控制单选的,TreePanel默认多选
scope:this,
checkchange : function(node, checked) {//传递两个参数,一个是当前节点,一个是当前节点的选中状态
node.attributes.checked = checked;//将当前状态付给node
if(checked){
role.grid.enable();//选中树时设置grid有效
//alert(node.id);
//加载模块对应的功能
}else{
role.grid.setDisabled(true);// 设置grid为无效
}
var chs = role.treePanel.getChecked();//获取当前树中被选中的所有节点
for (var i = 0; i < chs.length; i++) {//循环判断,
if (chs[i].attributes['id'] != node.attributes['id']) {//第i个节点是否与刚刚选中的节点的id相同,
chs[i].ui.toggleCheck(!checked);//如果不同,则执行checked的反操作,也就是选中了变成未选中
}
}
}
}
});
分享到:
相关推荐
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...
在EXT JS这个强大的JavaScript框架中,`Tree`和`Grid`是两个非常重要的组件,用于构建数据密集型的用户界面。在"ext tree grid 的高级实例运用"中,我们将深入探讨如何有效地结合这两个组件,实现复杂的交互功能。...
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
这个问题在实际开发中可能会遇到,尤其是在需要动态管理数据的界面中。 首先,EXTJS的Tree组件和Grid组件提供了内置的拖放(Drag and Drop,简称D&D)支持。Tree组件通常用于展示层级结构的数据,而Grid组件则常...
Ext Grid和Tree是Ext JS库中的两种重要组件,它们在Web应用开发中广泛用于数据展示和组织。Ext JS是一个强大的JavaScript框架,它提供了一系列高级UI组件,帮助开发者构建功能丰富的、交互性强的Web应用程序。 首先...
- Tree支持动态加载,即根据需要加载子节点,这有助于提高页面性能。 - Tree具有勾选功能,可以通过设置checkField和checkboxModel来实现节点的勾选状态同步,比如点击子节点自动勾选父节点,点击父节点自动勾选...
对于无限级的Tree Grid,Store需要能够处理动态加载的数据。 6. **Column Model**:定义Grid Panel中的列,包括列的标题、宽度、对齐方式、是否可编辑等属性。 7. **Selection Model**:控制用户如何选择Grid中的...
- **TreePanel**: 显示树形数据的容器,它继承自Ext.grid.Panel,并添加了树状布局和特有的功能。 - **Store**: 负责管理树的数据,可以是JSON或XML格式,包含节点的所有信息。 - **Model**: 定义树节点的数据...
TreeStore负责树数据的加载和管理,而TreeNode则代表树中的每一个元素。开发者可以通过监听树节点的各种事件来实现自定义功能。 4. **容器与布局**: 容器(Container)是ExtJS4中用于组织和管理其他组件的组件。...
Ext.Msg.alert("提示", "您点击前进按钮"); } }; ``` 这些按钮通过简单的事件处理器实现了基本的功能。 #### 四、总结 通过上述步骤,我们可以使用ExtJS轻松地实现一个功能齐全的动态树形结构。这种结构不仅...
EXT.tree.Column用于设置树节点列的显示,EXT.tree.LoadMask可以在加载数据时显示遮罩。 4. **独立文件和注释**: 每个控件被编写为独立的文件,这意味着它们可以方便地被引入到项目中,降低了代码的耦合度,有利于...
Ext TreeGrid是一款在Ext JS框架下开发的组件,它结合了Tree和Grid的优点,提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中,Tree通常用于展现层级关系的数据,而Grid则用于显示二...
`editTreeGrid`是EXT JS中的一个特例,它是可编辑的TreeGrid面板,提供了在树节点中直接编辑数据的能力。这种组件通常用于管理具有层次关系的数据,比如组织结构、文件系统或数据库表的层级结构。 1. **EXT JS简介*...
- **Ajax Loading**:通过Ajax异步加载数据,实现动态刷新和分页。 - **Server-Side Pagination**:服务器端分页,减少页面加载的数据量。 - **Events Handling**:监听用户操作,如点击、编辑等,实现响应式交互...
树节点可以通过`children`属性定义子节点,或者通过异步加载数据。树视图还支持节点的展开/折叠、选择、拖放操作。 **四、ExtJS 4.21 版本特性** ExtJS 4.21版本引入了一些改进和新特性,包括性能优化、兼容性提升...
无论是用于展示表格数据的Grid,收集用户输入的Form,还是用于导航的Tree,Ext Js都提供了完善的支持和灵活的配置选项,使得开发过程更加便捷。通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令...
在ExtJS中,"树形表格"(Tree Grid)是一种结合了树视图和数据网格功能的复合控件,它允许用户同时查看数据的层次结构和表格形式,极大地提高了数据展示的灵活性和交互性。在本篇文章中,我们将深入探讨ExtJS中的树...
在"Ext左树有表格 增删改查"这个主题中,我们主要关注的是ExtJS如何实现左侧树形结构与右侧表格的交互,以及在这样的布局中进行数据的增、删、改、查操作。 首先,ExtJS中的树形组件(TreePanel)可以用来展示层级...
在这个示例中,当用户在Tree或Grid上进行操作时,如点击节点,前端会向后台发送请求,后台根据请求内容查询数据库并返回数据,前端再根据返回的JSON数据更新视图状态。 6. **角色权限(rolePermission)**: 在...