ExtJS4.x treegrid 控件复选框的研究

最新推荐文章于 2019-10-29 17:25:07 发布
最新推荐文章于 2019-10-29 17:25:07 发布
阅读量170 收藏
点赞数
分类专栏： EXT 文章标签： ux 测试 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2903/article/details/82647220
版权
最近在研究ExtJS4.x版本，官方在发布包中包含了一个treegrid插件，先看下效果：

本人想在Controller中动态获取、设置左侧的复选框列。
这里是官方提供的示例：http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.html
这里具体的js： http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.js
官方示例中提供了几种列：treecolumn、templatecolumn、actioncolumn和checkcolumn
前三者不是本篇要说的，可以看下DEMO就明白，本篇主要说checkcolumn的动态获取与设置问题。

treepanel是继承至Ext.tree.Panel，Store也就是Ext.data.TreeStore类型了，看先下我的几个主要类。
注：在看本篇时请先了解ExtJS及其MVC开发模式，这不是本篇的重点，不清楚可以阅读API或本人其他文章。
2、Controller 

Ext.define('Manage.controller.Authorize', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.ux.CheckColumn'],
    stores: ['Category'],
    views: ['authorize.Config'],
    models: ['Category'],
    init: function () {
        this.control({
            'authorizeConfig button[action=selectAll]': {
                click: this.selectAll
            }
        })
    },
    selectAll: function (button) {
        //本文后写的代码都是放在这里，请注意。
    }
});


Controller需要与Model、Store、View一起分析，这里需要注意引用“Ext.ux.CheckColumn”，另外在app.js中加入如下代码：
Ext.Loader.setPath('Ext.ux', '/ExtJS/4.1/examples/ux');

3、Model

看下Model类： 

Ext.define('Manage.model.Category', {
    extend: 'Ext.data.Model',
    fields: ['Check', 'Code', 'Name', 'English', 'ParentCode', 'ParentName', 'UploadCode', 'UploadName',
            'IsPage', 'IsMenu', 'IsMap', 'EnableConsult', 'PageUrl', 'MenuUrl', 'Sort'],
    proxy: Ext.create('Manage.proxy.Category')
});


注意这里的Check字段，主要是用来映射treegrid中的checkbox列。

4、Store 

Ext.define('Manage.store.Category', {
    extend: 'Ext.data.TreeStore',
    model: 'Manage.model.Category',
    folderSort: true,
    defaultRootId: ''
});


5、Proxy 

Ext.define('Manage.proxy.Category', {
    extend: 'Ext.data.proxy.Ajax',
    startParam: undefined,
    api: {
        read: '/Manage/Category/Query.aspx',
        update: '/Manage/Category/Update.aspx',
        create: '/Manage/Category/Add.aspx',
        destroy: '/Manage/Category/Delete.aspx'
    },
    reader: {
        type: 'json',
        root: 'children',
        idProperty: 'Code',
        messageProperty: 'message',
        successProperty: 'success'
    },
    writer: {
        type: 'json',
        root: ''
    }
});


这里实际上只用到的read，返回的json如下： 


{
    "id": 0,
    "text": "根",
    "expanded": true,
    "leaf": false,
    "children": [{
        "Code": "11",
        "Name": "数据管理",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 1,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1111",
            "Name": "新闻管理",
            "English": null,
            "ParentCode": "11",
            "ParentName": "数据管理",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": null,
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    },
    {
        "Code": "12",
        "Name": "系统管理",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 2,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1211",
            "Name": "文章模版",
            "English": null,
            "ParentCode": "12",
            "ParentName": "系统管理",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "tempList",
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    },
    {
        "Code": "13",
        "Name": "系统配置",
        "English": null,
        "ParentCode": null,
        "ParentName": null,
        "UploadCode": null,
        "UploadName": null,
        "IsPage": 0,
        "IsMenu": 1,
        "IsMap": 0,
        "EnableConsult": 0,
        "PageUrl": null,
        "MenuUrl": null,
        "Sort": 3,
        "iconCls": null,
        "leaf": false,
        "expanded": true,
        "children": [{
            "Code": "1311",
            "Name": "角色管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "roleList",
            "Sort": 1,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1312",
            "Name": "管理员管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "adminList",
            "Sort": 2,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1313",
            "Name": "权限分配",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "authorizeConfig",
            "Sort": 3,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1314",
            "Name": "分类管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": "categoryList",
            "Sort": 4,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        },
        {
            "Code": "1315",
            "Name": "文章管理",
            "English": null,
            "ParentCode": "13",
            "ParentName": "系统配置",
            "UploadCode": null,
            "UploadName": null,
            "IsPage": 0,
            "IsMenu": 1,
            "IsMap": 0,
            "EnableConsult": 0,
            "PageUrl": null,
            "MenuUrl": null,
            "Sort": 5,
            "iconCls": null,
            "leaf": true,
            "expanded": true,
            "children": []
        }]
    }]
}


6、View

最后看下视图： 


Ext.define('Manage.view.authorize.Config', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.authorizeConfig',
    title: '权限配置',
    resizable: false,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    autoShow: true,
    iconCls: 'Groupkey',
    modal: true,
    buttonAlign: 'center',
    initComponent: function () {
        this.items = [
            {
                xtype: 'grid',
                flex: 1,
                title: '角色列表',
                titleAlign: 'center',
                border: false,
                selModel: Ext.create('Ext.selection.RowModel', { injectCheckbox: 1 }),
                store: 'Role',
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: 'Role',
                    dock: 'bottom',
                    displayInfo: true
                }],
                columns: [{
                    xtype: 'rownumberer',
                    width: 40,
                    align: 'center',
                    sortable: false
                }, {
                    header: '角色编号',
                    dataIndex: 'Code',
                    align: 'center',
                    flex: 1
                }, {
                    header: '角色名称',
                    dataIndex: 'Name',
                    align: 'center',
                    flex: 1
                }, {
                    header: '角色状态',
                    dataIndex: 'State',
                    align: 'center',
                    renderer: Manage.utility.Format.LockState,
                    flex: 1
                }]
            },
            {
                width: 1
            },
            {
                xtype: 'treepanel',
                flex: 1,
                title: '权限列表',
                titleAlign: 'center',
                border: false,
                useArrows: true,
                rootVisible: false,
                multiSelect: true,
                singleExpand: false,
                store: 'Category',
                bbar:[{
                    type: 'button',
                    iconCls: 'Bullettick',
                    action: 'selectAll',
                    text: '全选'
                }],
                columns: [{
                    xtype: 'checkcolumn',
                    dataIndex: 'Check',
                    width: 40,
                    stopSelection: false
                }, {
                    text: '编号',
                    width: 80,
                    sortable: true,
                    dataIndex: 'Code'
                }, {
                    xtype: 'treecolumn',
                    text: '名称',
                    width: 100,
                    sortable: true,
                    dataIndex: 'Name'
                }, {
                    text: '上传配置',
                    width: 100,
                    sortable: true,
                    dataIndex: 'UploadName'
                }, {
                    text: '管理路径',
                    width: 100,
                    flex: 1,
                    sortable: true,
                    dataIndex: 'MenuUrl'
                }]
            }
        ];

        this.buttons = [
            {
                text: '保存',
                action: 'submit'
            },
            {
                text: '重置',
                action: 'reset'
            }
        ];

        this.callParent(arguments);
    }
});


7、获取、设置Checkbox

如下代码放在控制器中（上文已注解）： 

var grid = button.up('treepanel');	//由触发的buttom向上查询treepanel控件
var store = grid.getStore();		//这里通过grid获取store
console.log(store.getCount());		//这里会发现返回的是undefined，所以该方法不可行
var table = grid.getView();		//由grid获取Table对象	
var elems = table.getNodes();		//获取HTMLElement[]对象

for(var i=0;i<elems.length;i++){	//遍历所有对象
    var record = table.getRecord(elems[i]);//把HTMLElement转移成Record（Model）对象
    var check = record.get('Check');	//获取属性值
    if(check){
        console.log(record.get('Code'));
    }
    record.set('Check', !check);	//设置属性值
}
iteye_2903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 4.2 创建带复选框的树，并且有全选反选功能
tumi
08-19 2981
var store = Ext.create(‘Ext.data.TreeStore,{//注意：store的数据后台返回时需要加 checked:false 属性；     fields:['text','id'],     root: {         id:'root',         expanded: true,         "checked": false,  
EXTJS4 给grid加 复选框列
水木小僧
03-09 1124
记录一下被extjs折磨的过程。。。。效果如图：就这玩意，慢活了大半天，网上搜的答非所问，可能是我关键词选的不好。最后还是在官方的例子中找到的。官方例子地址：http://docs.sencha.com/extjs/4.0.7/extjs-build/examples/grid/grid-plugins.html这其实很简单，代码如下：(红色的为复选框的代码,其他的可自行忽略),var sm = ...
extjs4.1下拉复选框完整DEMO
06-05
extjs4.1下拉复选框完整DEMO，包含了extjs4.1主文件，代码实现了动态加载功能，所以需要配置IIS或者apache。插件文件在ux目录下，请自行参考。
EXTJS5的学习记录之TreePanel树的本地加载与异步加载
Reiner的专栏
03-19 4956
首先来创建一个store数据源  var store = Ext.create('Ext.data.TreeStore', { root: { expanded: false,//默认不展开 children: [ //这里是树的节点 有层级的 { text: "一级节点", leaf: true,id:'fir
extjs4 treepanel、 树、节点的操作
.
08-31 5707
这是个tree panel的实例，是基于extjs的mvc模式，先得对mvc模式有一定的了解 效果图 store存储层下加载tree数据的类 Ext.define('yang.store.frameAAA.module.FrameAAAWestTreeStore', { extend : 'Ext.data.TreeStore', storeId : 'frameAAAW
Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
weixin_30298497的博客
04-20 389
最近在用Extjs 做后台管理系统，真的非常好用。总结的东西分享一下。 先展示一下效果图 好了，开始吧！ 首先说一下我的创建结构： 一、构造内容 这个函数中包括store的创建，treePanel的创建 一个treePanel必须绑定一个Ext.data.TreeStore. function constructor(config){ //创建一个treeSto...
Extjs 4.x 得到form CheckBox 复选框的值
01-19
CheckBox（复选框）主要用来接收用户选择的选项 如图所示（请忽略UI的不好看）： 该弹出窗口的主要代码如下： 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗？’, width : 500, ...
extjs3.X 带复选框的树
03-28
总的来说，带复选框的树在ExtJS 3.x中是一个强大的功能，它结合了树形结构和复选框的选择机制，为用户提供了一种直观且高效的方式来操作层级数据。理解和实现这样的功能，对提升ExtJS应用的用户体验至关重要。
关于extjs treepanel复选框选中父节点与子节点的问题
12-02
总的来说，EXTJS TreePanel的复选框功能是通过监听节点状态变化并递归地更新子节点状态来实现的，同时需要确保所有子节点未选中时父节点才能取消选中。这种设计提高了用户界面的交互性和易用性。
extjs4.*完美时间日期控件，可选时分秒
11-19
网上找了一些，不是运行不了，就是代码繁多复杂。所以自己试着写了一个扩展的时间日期控件，可选时分秒，包含项目源代码，下载可直接运行·
Extjs4 Treegrid 使用心得分享(经验篇)
12-11
最近调试EXTJS 4的treegrid实例，看了很多水友的文章，以及官方的demo， 没一个可靠的，全都无法显示出来。像对于我们习惯用C++的coder来说，EXTJS简直就是一群无政府土匪来维护的，官网上连个搜索框都没有，找资料基本靠遍历，还是人工的。使用treegrid，需要在调用页面的head中加载以下几个文件： 代码如下: <link rel=”stylesheet” type=”text/css” href=”css/ext-all.css”> [removed][removed] <script ty
ExtJS4学习笔记(十八)---带复选框的树（Checkbox tree）
dowhathowtodo
08-30 297
实例显示了一个简单的带复选框的的树，通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点，可以参考本站另一片文章来实现此功能，链接地址为：www.mhzg.net/a/20112/2011222109040.html 效果图 js代码： Ext.require([ 'Ext.tree.*', 'Ex...
ExtJS4 grid单元格添加复选框
祥子的博客
08-11 3923
效果图： //添加复选框 var deal = function(grid){ //获取视图行数 var rows = grid[0].getView().getStore().totalCount; //获取视图列数 var cols = grid[0].getView().componentLayoutCounter; //遍历节点 for(var i = 0;
解决ext中treepanel的store首次加载的时候参数加载不了
qq_20426717的博客
10-29 313
首先在tree的store中不添加数据获取地址； 在界面加载的afterrender事件中添加以下代码 store.setProxy({ type: 'ajax', url: Ext.getPath('url?参数名=' + 参数值) }); store.load(); ...
ExtJS学习之TreePanel
达拉斯母牛
10-28 5542
1 树（Tree Panel） 在Web应用程序开发中，Tree Panel使用的频率很高。Tree Panel是ExtJS的核心组件之一，Tree Panel和Grid Panel一样都是从相同的类（Ext.panel.Table）扩展， 因此Tree Panel具有Grid Panel的所有功能，Grid Panel的features、extensions和plugins在Tree Pan
ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
taolinsen的专栏
10-30 1698
前面一篇文章实现了业务系统的整体布局(《ExtJS4.X Boder 布局实现系统页面框架》)，接下来我们来实现一个经常使用的菜单，前台不用说当然是使用Ext，后台代码使用C#，最终实现了一个动态加载菜单并且点击菜单后实现Tab页的加载。 首先说下treestore的数据结构，treestore就是treepanel的本地构建的数据源 01 var sto
extjs5 使用 treepanel 、treeStore、Proxy
ybbkd2的专栏
11-26 499
一直想使用 extjs5 treeStroe with Proxy 方式一次性load 所有树形结构数据，结果没成功， treeStroe 在每次点击展开的时候都会发起请求到后台，url里面还增加node参数。 只能做成异步加载了。每次只load 当前节点的子节点。 [code="js"] Ext.define('publicweb.store.MenuTreeStore', ...
ExtJS4.x入门教程：搭建环境与HelloWorld
"extJS4.x中文API学习教程" 在JavaScript框架的世界中，ExtJS是一个备受推崇的选择，尤其在Ajax应用的开发中表现出色。ExtJS 4.x版本提供了丰富的组件库和强大的API，使得开发者能轻松创建功能丰富的、响应式的网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值