`

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

    博客分类：
  • EXT
 
阅读更多
最近在研究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);	//设置属性值
}
  • 大小: 30 KB
分享到：
| 详解MyEclipse10 安装Spket 1.6.23（支持Ex ...
评论
发表评论

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

相关推荐

    extjs3.X 带复选框的树

    总的来说，带复选框的树在ExtJS 3.x中是一个强大的功能，它结合了树形结构和复选框的选择机制，为用户提供了一种直观且高效的方式来操作层级数据。理解和实现这样的功能，对提升ExtJS应用的用户体验至关重要。

    Extjs3.x入门学习

    它支持各种输入控件（如文本框、选择框、复选框等）、验证机制、按钮和布局。学习这部分内容将掌握如何创建、配置和管理表单元素，以及如何处理表单事件和数据提交。 3. **TreePanel使用**： TreePanel用于展示...

    extjs3.x 官方示例以及chm版api

    4. **Ajax交互**：ExtJS 3.x 提供了强大的Ajax功能，如AJAX请求对象、数据Proxy，使得与服务器端数据交换变得更加简单。 5. **Store和Model**：数据存储机制，Store负责管理数据集，Model定义了数据结构和验证规则...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    4. **父选子**：当父节点的复选框被选中或取消选中时，所有子节点的选中状态也应同步。同样，也需要监听`checkchange`事件，并遍历子节点进行状态同步。 在JSP页面上，ExtJS与ADF（Oracle Application Development ...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中，`tabpanel`是用于创建多标签界面的组件，它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式，因为它允许按需加载内容，减少初始页面加载时间。...

    ExtJS 3.x中文API

    4. **表单（Forms）**：ExtJS提供了强大的表单创建和处理功能，包括各种输入控件、验证规则以及远程提交能力。 5. **网格（Grids）**：网格组件是展示和操作大量数据的重要工具，支持分页、排序、过滤、编辑等功能...

    ExtJS2.X 版本app

    ExtJS2.X 版本app 这个版本目前找不到了噢

    ExtJS3.x 中文API CHM 格式

    ExtJS3.x 中文帮助文档，是 CHM 格式的，方便阅读和查询。本人正在使用，效果不错，共享出来，方便大家。

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

    在ExtJS 4.x框架中，ComboboxTree是一种特殊的组件，它将传统的下拉框与树形结构结合在一起，提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用，尤其当数据层级关系复杂时，可以方便地进行多选或...

    ExtJS 4.X 中文Api CHM

    Ext JS 4.X 中文API,不过有些地方不是很好，显示的有点慢！

    extjs4.1下拉复选框完整DEMO

    在这个"extjs4.1下拉复选框完整DEMO"中，我们主要关注的是如何使用ExtJS实现一个具有动态加载功能的下拉复选框组件。这个DEMO包含以下几个关键组成部分： 1. **ext-all-debug.js**：这是ExtJS的核心库文件，包含了...

    extjs3.x+swfupload.swf多文件上传终结版

    ExtJS 3.x 和 SWFUpload 是两种不同的技术，它们结合使用可以实现高效的多文件上传功能。这篇内容将深入解析这两个技术以及它们如何协同工作。 **ExtJS 3.x** ExtJS 是一个流行的JavaScript库，主要用于构建富...

    ExtJS4.x中文API

    extjs4.x中文api 实用比较方便 。

    ExtJs 2.X API

    详细的介绍了EXT2.X各种对象的属性、方法、事件

    Ext.ux.tree.treegrid异步加载

    在ExtJS框架中，`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件，适用于展示具有层级关系的数据。通过这种组件，用户可以在一个界面上同时查看数据的层次结构以及具体数据内容。 #### 二、...

    解决Extjs当中复选框全选后，取消选中某一项，全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中，用户界面的交互设计是其一大亮点，其中包括各种各样的控件，如复选框（checkboxes）和全选功能。然而，在实际应用中，我们可能会遇到一个问题：当实现全选功能后，如果尝试取消...

    extjs4.x中文API

    绝对详细的extjs4.x api绝对详细，值得我们下载

    extjs4.x 配置所需jsb和js文件

    ExtJS 4.x 是一个流行的JavaScript框架，用于构建富客户端应用程序。它提供了丰富的组件库、数据绑定机制和可扩展的架构。在开发过程中，正确配置所需的jsb（JSBuilder）和js文件至关重要，以确保应用的高效运行和...

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