`

ExtJs4之TreePanel

    博客分类：
  • EXT
 
阅读更多
Tree介绍
树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。
在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。
1.ExtJs4之Grid详细
2.ExtJs4之TreePanel 
<head>
    <title></title>
     <link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
    <script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
    <script src="/ExtUI/ExtJs4.2.1/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //型录树Store
            var treeStore = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/Tools/106.ashx?method=getCatalogItem&cataId=' + 886
                },
                fields: ['text', 'id', 'leaf', 'cataId']
            });
            //型录树
            var CatalogTtree = Ext.create('Ext.tree.Panel', {
                store: treeStore,
                border: false,  //边框
                renderTo: Ext.getBody(),
                enableDD: true,
                rootVisible: false,  //隐藏根节点
                useArrows:true, //树节点使用箭头
                containerScroll: true,
                collapsible: false,
                autoScroll: false,                
                //singleExpand:true   //展示单个子节点，其它的子节点合并。
            });         
           CatalogTtree.expandAll(); //展开所有节点
           //CatalogTtree.collapseAll(); //关闭所有节点
           
            
               
         });
    </script>
</head>


treePanel展开所有，关闭所有
CatalogTtree.expandAll(); //展开所有节点
CatalogTtree.collapseAll(); //关闭所有节点
TreeGrid简例,带弹出window的form表单 

Ext.onReady(function () {
            //获取store
            var ClassTreeGridStore = Ext.create('Ext.data.TreeStore', {
                model: 'Task',
                proxy: {
                    type: 'ajax',
                    actionMethods: {
                        create: "POST", read: "POST", update: "POST", destroy: "POST"
                    },
                    url: '/queClass/GetClassTreeStore'
                },
                fields: ["qcId", "claName", "pId", "lowScroe", "topScore"],
                folderSort: true
            });
            //获取tbar
            var tbar = Ext.create("Ext.toolbar.Toolbar", {
                items: [
                    {
                        text: '添加兄弟分类',
                        iconCls: 'a_add',
                        handler: function () {
                            AddDialog.setTitle("添加兄弟分类");
                            AddForm.form.reset();
                            Ext.getCmp("btnAdd").show();
                            Ext.getCmp("btnEdit").hide();
                            Ext.getCmp("pName").hide();
                            Ext.getCmp("bName").show();
                            if (typeof (ClassTreeGrid) == "undefined") {
                                return false;
                            }
                            var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                            if (typeof (rows[0]) == "undefined") {
                                Ext.Msg.alert("提示", "请选择要操作的行！");
                                return false;
                            }
                            Ext.getCmp("bName").setValue(rows[0].data.claName);
                            AddDialog.show();
                        }
                    }, '-',
                     {
                         text: '添加子分类',
                         iconCls: 'a_add',
                         handler: function () {
                             AddDialog.setTitle("添加子分类");
                             AddForm.form.reset();
                             Ext.getCmp("btnAdd").show();
                             Ext.getCmp("btnEdit").hide();
                             Ext.getCmp("bName").hide();
                             Ext.getCmp("pName").show();
                             if (typeof (ClassTreeGrid) == "undefined") {
                                 return false;
                             }
                             var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                             if (typeof (rows[0]) == "undefined") {
                                 Ext.Msg.alert("提示", "请选择要操作的行！");
                                 return false;
                             }
                             Ext.getCmp("pName").setValue(rows[0].data.claName);
                             AddDialog.show();
                         }
                     }, '-',
                    {
                        text: '删除',
                        iconCls: 'a_cross',
                        handler: DelClass
                    }, '-',
                    {
                        text: '修改',
                        iconCls: 'a_edit',
                        handler: function () {
                            AddDialog.setTitle("修改分类");
                            AddForm.form.reset();
                            Ext.getCmp("btnEdit").show();
                            Ext.getCmp("btnAdd").hide();
                            Ext.getCmp("bName").hide();
                            Ext.getCmp("pName").hide();
                            if (typeof (ClassTreeGrid) == "undefined") {
                                return false;
                            }
                            var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                            if (typeof (rows[0]) == "undefined") {
                                Ext.Msg.alert("提示", "请选择要操作的行！");
                                return false;
                            }
                            AddForm.form.setValues(rows[0].data);
                            AddDialog.show();
                        }
                    }, '-',
                    {
                        text: "刷新",
                        iconCls: "a_refresh",
                        handler: function () {
                            //刷新treepanel
                            ClassTreeGridStore.load();
                        }
                    }, '-',
                    {
                        text: '展开所有',
                        iconCls: 'a_edit2',
                        handler: function () {
                            //展开所有函数
                            ClassTreeGrid.expandAll();
                        }
                    }, '-',
                    {
                        text: '折叠所有',
                        iconCls: 'a_lock',
                        handler: function () {
                            //折叠所有函数
                            ClassTreeGrid.collapseAll();
                        }
                    }
                ]
            });
            //treegrid
            var ClassTreeGrid = Ext.create('Ext.tree.Panel', {
                tbar: tbar,
                useArrows: true,
                rootVisible: false,
                store: ClassTreeGridStore,
                multiSelect: false,
                singleExpand: false,
                columns: [{   //定义tree的列
                    xtype: 'treecolumn',
                    text: '分类名称',  //显示的表头列名称
                    flex: 2,
                    sortable: true,
                    dataIndex: 'claName'  //对应store的列字段名称
                }, {
                    text: '最小分值',
                    flex: 1,
                    dataIndex: 'lowScroe',
                    sortable: true
                }, {
                    text: '最大分值',
                    flex: 1,
                    dataIndex: 'topScore',
                    sortable: true
                }]
                , listeners: {
                    //点击行触发事件
                    itemclick: function (record, node) {
                        //把列的qcid传递给QuesGridStore刷新对应的grid或tree
                        QuesGridStore.load({ params: { csId: node.data.qcId } });
                    }
                }
            });          
            //弹出window的form表单
            var AddForm = Ext.create("Ext.form.Panel", {
                border: false,
                fieldDefaults: {
                    msgTarget: 'side',  //提示信息在右旁边显示图标
                    labelWidth: 105,
                    align: "right",
                    regexText: '格式错误', //错误提示
                    allowBlank: false //不与许为空
                },
                defaults: {
                    padding: 15,
                    width: 380
                },
                defaultType: "textfield",
                items: [
                     {
                         xtype: "hidden",
                         name: 'pId',
                     },
                     {
                         fieldLabel: '父分类名称',
                         id: "pName",
                         name: 'pName',
                         disabled: true
                     },
                      {
                          fieldLabel: '兄弟分类名称',
                          id: "bName",
                          name: 'bName',
                          disabled: true
                      },
                     {
                         fieldLabel: '分类名称',
                         name: 'claName',
                     },
                    {
                        //表单中的数字控件
                        xtype: "numberfield",
                        fieldLabel: '最小分值',
                        name: 'lowScroe',
                        regex: /^\d+$/,  //正则验证
                        maxLength: 100,
                    },
                    {   //表单中的数字控件
                        xtype: "numberfield",
                        fieldLabel: '最大分值',
                        regex: /^\d+$/,
                        regexText: '格式错误',
                        name: 'topScore',
                    }
                ]
            });
            //要弹出的window
            var AddDialog = Ext.create("Ext.window.Window", {
                iconCls: 'a_add',
                closeAction: 'hide',        //窗口关闭的方式：hide/close
                resizable: false,
                closable: true,            //是否可以关闭
                modal: true,                //是否为模态窗口
                items: AddForm,
                buttons: [{
                    text: '添加',
                    iconCls: 'a_add',
                    id: "btnAdd",
                    handler: function () {
                        if (AddForm.form.isValid()) {
                            if (AddDialog.title == '添加兄弟分类') {
                                //O为兄弟分类，1为子分类
                                AddClass(0);
                            }
                            else {
                                AddClass(1);
                            }
                        }
                    }
                },
                {
                    text: '修改',
                    iconCls: 'a_edit',  //样式
                    id: "btnEdit",
                    handler: EditClass
                },
                {
                    id: "btnCancel",
                    iconCls: 'a_cross',  //样式
                    text: '重置',
                    handler: function () {
                        //重置AddForm.form表单
                        AddForm.form.reset();
                    }
                }]
            });
            new Ext.Viewport({
                layout: "border",
                renderTo: Ext.getBody(),
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [{ region: "north", height: "60%", split: true, layout: "fit", border: true, items: [ClassTreeGrid] }
                       
                ]
            });
            //添加分类
            function AddClass(type) {
                var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                var id = 0;
                var leaf = false;
                //兄弟分类
                if (type == 0) {
                    id = rows[0].data.pId;
                }
                else {
                    id = rows[0].data.qcId;
                }
                Ext.Ajax.request({
                    method: "post",
                    url: "/queClass/Add",
                    params: { json: Ext.JSON.encode(AddForm.form.getValues()), id: id },
                    callback: function (options, success, response) {
                        if (success) {
                            var json = response.responseText;
                            json = Ext.decode(json);
                            ClassTreeGridStore.load();
                            Ext.Msg.alert("提示", json.msg);
                            AddDialog.hide();
                        }
                        else {
                            Ext.Msg.alert("提示", "系统繁忙");
                        }
                    }
                });
            }
            //删除分类
            function DelClass() {
                var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                if (typeof (rows[0]) == "undefined") {
                    Ext.Msg.alert("提示", "请选择要操作的行！");
                    return false;
                }
                Ext.Ajax.request({
                    method: "post",
                    url: "/queClass/Delete/",
                    params: { qcId: rows[0].data.qcId },
                    callback: function (options, success, response) {
                        if (success) {
                            var json = response.responseText;
                            json = Ext.decode(json);
                            ClassTreeGridStore.load();
                            Ext.Msg.alert("提示", json.msg);
                            AddDialog.hide();
                        }
                        else {
                            Ext.Msg.alert("提示", "系统繁忙");
                        }
                    }
                });
            }
            //修改分类
            function EditClass() {
                var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
                if (typeof (rows[0]) == "undefined") {
                    Ext.Msg.alert("提示", "请选择要操作的行！");
                    return false;
                }
                Ext.Ajax.request({
                    method: "post",
                    url: "/queClass/Edit/",
                    params: { json: Ext.JSON.encode(AddForm.form.getValues()), qcId: rows[0].data.qcId },
                    callback: function (options, success, response) {
                        if (success) {
                            var json = response.responseText;
                            json = Ext.decode(json);
                            ClassTreeGridStore.load();
                            Ext.Msg.alert("提示", json.msg);
                            AddDialog.hide();
                        }
                        else {
                            Ext.Msg.alert("提示", "系统繁忙");
                        }
                    }
                });
            }
        });
复制代码
treepanel右键菜单编辑
代码：
复制代码
   //GUID
        function newGuid() {
            var guid = "";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
                if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                    guid += "-";
            }
            return guid;
        }
        //Toopitp
        Ext.tip.QuickTipManager.init();
        
        //Model
        Ext.define('MyTreeModel', {
            extend: 'Ext.data.Model',
            fields: ['text','id','leaf','caitNo']
        });  
        //Store
        Ext.define("MyTreeStore", {
            extend: "Ext.data.TreeStore",
            model: 'MyTreeModel',
            proxy: {
                type: 'ajax',
                api: {
                    read: '/Tools/106.ashx?method=getCatalogItem',
                },
                writer: {
                    type: 'json',
                    allowSingle: false,
                    encode: true,
                    root: 'records'
                }
            },
            root: {
                id: -1,
                expanded: true,
                text: cataId,
            },
            autoLoad: true
        });
        var MyTreeStore = Ext.create("MyTreeStore");
        Ext.define("MyTreePanel", {
            extend: 'Ext.tree.Panel',
            width: 250,
            height: 400,
            store: MyTreeStore,
            hideHeaders: true,
            rootVisible: true,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop'
                },
                listeners: {
                    drop: function (node, data, dropRec, dropPosition) {
                        store.sync();
                    }
                }
            },
            initComponent: function () {
                var me = this;              
                //可编辑
                me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];
                //定义列
                me.columns = [{
                    xtype: 'treecolumn',
                    dataIndex: 'text',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        selectOnFocus: true,
                        validator: function (value) {
                            value = Ext.String.trim(value);
                            return value.length < 1 ? this.blankText : true;
                        }
                    }
                }, {
                    xtype: 'actioncolumn',
                    width: 24,
                    icon: '/ExtUI/Image/a_delete.gif',
                    iconCls: 'x-hidden',
                    tooltip: '删除',
                    handler: Ext.bind(me.handleDeleteClick, me)
                }];
                //定义菜单
                Ext.define('SimpleTasks.view.lists.ContextMenu', {
                    extend: 'Ext.menu.Menu',
                    xtype: 'listsContextMenu',
                    items: [
                            {
                                text: '兄弟节点',
                                iconCls: 'a_add',
                                id: 'new-list-item',
                                handler: me.handleNewListClick,
                                scope: me
                            },
                            {
                                text: '孩子节点',
                                iconCls: 'a_add',
                                id: 'new-folder-item',
                                handler: me.handleNewFolderClick,
                                scope: me
                            },
                            {
                                text: '删除',
                                iconCls: 'a_delete',
                                id: 'delete-folder-item',                               
                            },
                            {
                                text: '刷新',
                                iconCls: 'a_refresh',
                                id: 'refresh-folder-item',
                                handler: function () {
                                    MyTreeStore.load({ params: grid.getView().getSelectionModel().getSelection()[0].data });
                                }
                            }
                        ]
                });
                //定义底部tbar
                me.dockedItems = [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                        iconCls: 'a_add',
                        tooltip: '兄弟节点',
                        handler: me.handleNewListClick,
                        scope: me
                    }, {
                        iconCls: 'a_add',
                        tooltip: '孩子节点',
                        handler: me.handleNewFolderClick,
                        scope: me
                    }, 
                    {
                        iconCls: 'a_delete',
                        id: 'delete-folder-btn',
                        tooltip: '删除',
                        scope: me
                    },
                    {
                        iconCls: 'a_refresh',
                        id: 'refesh-folder-btn',
                        tooltip: '刷新',
                        handler: function () {
                            MyTreeStore.load({ params: grid.getView().getSelectionModel().getSelection()[0].data });
                        }
                    }
                    ]
                }];
                me.contextMenu = Ext.create("SimpleTasks.view.lists.ContextMenu");
                me.callParent();               
                me.on("itemmouseenter", me.showActions);
                me.on("itemmouseleave", me.hideActions);
                me.on("edit", me.updateNode);
                me.on("afterrender", me.handleAfterListTreeRender);
                me.on("beforeedit", me.handleBeforeEdit, me);
                me.on("canceledit", me.handleCancelEdit);
                me.on("itemcontextmenu", me.showContextMenu, me);
                
            },
            //刷新树
            refreshView: function () {
                //refresh the data in the view.  
                //This will trigger the column renderers to run, 
                this.getView().refresh();
            },
            //显示actioncolumn
            showActions: function (view, list, node, rowIndex, e) {
                var icons = Ext.DomQuery.select('.x-action-col-icon', node);
                if (view.getRecord(node).get('id') != "-1") {
                    Ext.each(icons, function (icon) {
                        Ext.get(icon).removeCls('x-hidden');
                    });
                }
            },
            //隐藏actioncolumn
            hideActions: function (view, list, node, rowIndex, e) {
                var icons = Ext.DomQuery.select('.x-action-col-icon', node);
                Ext.each(icons, function (icon) {
                    Ext.get(icon).addCls('x-hidden');
                });
            },
            //Handles a click on a delete icon
            handleDeleteClick: function (gridView, rowIndex, colIndex, column, e, record) {
               var thisNodes=this;
               Ext.Ajax.request({
                   url:"/Tools/106.ashx?method=deleteTreeNode&cataId="+cataId,
                   params:record.data,
                   callback:function(options,success,response){
                       if(success)
                       {
                         var responseJson=Ext.JSON.decode(response.responseText)[0];
                         if(responseJson.status=="true")
                         {
                            //这个model区别于普通的model
                            //在定义store的时候并没有定义fields或model属性,该model由treeStore自动创建
                            //该model包含树展示所需要的数据结构,具备parentNode,isLeaf,loaded等属性
                            var model = gridView.getRecord(gridView.findTargetByEvent(e));
                            thisNodes.deleteNode(model);
                            Ext.Msg.alert("提示",responseJson.msg);
                         }
                         else
                         {
                            Ext.Msg.alert("提示",responseJson.msg);
                         }
                       }
                       else
                       {
                           Ext.Msg.alert("提示","请重新操作！");
                       }
                   }                                   
               });
               
            },
            //删除节点
            deleteNode: function (nodel) {
                nodel.parentNode.removeChild(nodel);
                //与服务器端同步
                MyTreeStore.sync();
            },
            //更新节点
            updateNode: function (editor,e,node) {
                var me = this;
//                //与服务器端同步
              //  MyTreeStore.sync(); 
               if(e.record.data.id.length>8)
               {
               
                 //插入
                  Ext.Ajax.request({
                  url:"/Tools/106.ashx?method=createTreeNode&cataId="+cataId,
                  params:e.record.data,
                  callback:function(options,success,response){
                      if(success)
                      {
                          var responJson=Ext.JSON.decode(response.responseText)[0];
                          if(responJson.status=="false")
                          {
                            Ext.Msg.alert("提示",responJson.msg);
                          }
                          else
                          {
                              MyTreeStore.load({ params: grid.getView().getSelectionModel().getSelection()[0].data });
                          }                  
                      }
                      else
                      {
                         Ext.Msg.alert("提示","系统繁忙");
                      }
                  }                  
               });
               }
               else
               {                 
                  //更新
                  Ext.Ajax.request({
                  url:"/Tools/106.ashx?method=updateTreeNode&cataId="+cataId,
                  params:e.record.data,
                  callback:function(options,success,response){
                      if(success)
                      {
                          var responJson=Ext.JSON.decode(response.responseText)[0];
                          if(responJson.status=="false")
                          {
                            Ext.Msg.alert("提示",responJson.msg);
                          }                         
                      }
                      else
                      {
                         Ext.Msg.alert("提示","系统繁忙");
                      }
                  }                  
               });
               }
            },
            //树加载完毕后设置默认选中第一个
            handleAfterListTreeRender: function (tree) {
                tree.getSelectionModel().select(0);
            },
            //编辑前判断跟节点不允许编辑
            handleBeforeEdit: function (editingPlugin, e) {
                return e.record.get('id') !== -1;
            },
            //取消编辑事件
            handleCancelEdit: function (editor, e) {
                var list = e.record,
                        parent = list.parentNode;
                parent.removeChild(list);
                this.getListTree().getSelectionModel().select([parent]);
            },
            //添加叶子节点
            handleNewListClick: function (component, e) {
                this.addNode(true);
            },
            //添加跟节点
            handleNewFolderClick: function (component, e) {
                this.addNode();
            },
            //添加节点
            addNode: function (leaf) {
                var me = this;
                var listTree = me;               
                cellEditingPlugin = listTree.cellEditingPlugin,
                    selectionModel = listTree.getSelectionModel(),
                    selectedList = selectionModel.getSelection()[0],                 
                    parentList = leaf?selectedList.parentNode : selectedList,
                    newList = Ext.create('MyTreeModel', {
                        id: newGuid(),
                        text: 'New List',
                        leaf: true,
                        loaded: true
                    }),
                    expandAndEdit = function () {
                        if (parentList.isExpanded()) {
                            selectionModel.select(newList);
                            cellEditingPlugin.startEdit(newList, 0);
                        } else {
                            listTree.on('afteritemexpand', function startEdit(list) {
                                if (list === parentList) {
                                    selectionModel.select(newList);
                                    cellEditingPlugin.startEdit(newList, 0);
                                    // remove the afterexpand event listener
                                    listTree.un('afteritemexpand', startEdit);
                                }
                            });
                            parentList.expand();
                        }
                    };
                //判断是否是子节点
                if(selectedList.isLeaf())
                {
                    if(!leaf) //判断是添加子节点还是兄弟节点
                    {
                       MyTreeStore.getNodeById(selectedList.data.id).set('leaf', false);
                    }
                }
                parentList.appendChild(newList);
                if (listTree.getView().isVisible(true)) {
                    expandAndEdit();
                } else {
                    listTree.on('expand', function onExpand() {
                        expandAndEdit();
                        listTree.un('expand', onExpand);
                    });
                    listTree.expand();
                }
            },
            //添加右键菜单
            showContextMenu: function (view, list, node, rowIndex, e) {
                this.contextMenu.showAt(e.getX(), e.getY());
                e.preventDefault();
            }
        });
分享到：
| ExtJS4.x treegrid 控件复选框的研究
评论
发表评论

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

相关推荐

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    ExtJS4 treepanel与girdpanel简单案例（包括MVC模式与非MVC模式）

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式：需要在引入js文件夹中的main.js文件 mvc开发模式：需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中，我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板（Collapsible Panel）功能的树形视图（TreePanel），以及与之联动的选项卡（TabPanel）。这个设计允许...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在本篇文章中，我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中（checked）的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例，结构如下： 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    ExtJS_TreePanel_树的配置详细属性

    主要方法： collapseAll()：收缩所有树节点 expandAll()：展开所有树节点 getRootNode()：获取根节点 getNodeById(String id)：获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    extjs4 treepanel动态改变行高度示例

    在本文中，我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件，它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...

    Extjs入门教程（treePanel和GridPanel）

    TreePanel是ExtJS中的一个树形控件，它允许你展示层级结构的数据。在教程中，你可能会学到如何创建和配置TreePanel，包括加载数据、设置节点图标、处理节点的展开和折叠事件，以及添加拖放功能。TreePanel通常用于...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息，我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点： ### 1. 创建TreeStore实例 ...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    4. **数据源同步**：如果你的数据源（如Store）在后台进行了更新，但是TreePanel没有重新加载，那么选中状态的改变可能不会反映到界面上。确保在数据源更新后，调用了`store.load()`来刷新TreePanel。 5. **渲染...

    extJs3升级extjs4方案

    而在 ExtJS4 中，我们需要使用以下代码来创建一个 TreePanel： ```javascript var ptree = Ext.create('Ext.data.TreeStore', { // ... }); ``` 可以看到，ExtJS4 使用 Ext.create 函数来创建组件类，这样可以...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中，Panel和TreePanel是两个非常重要的组件，它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能，帮助开发者更好地理解和运用这些特性。 首先，让我们...

    无废话ExtJs 系列教程十五[树：TreePanel]

    《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件，它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法，使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明： 1. **主要...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树（Checkbox tree） Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...

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

    ComboBoxTree是ExtJS4中的一个自定义组件，它结合了ComboBox（下拉框）和TreePanel（树形面板）的功能。ComboBox通常用于提供一个下拉列表供用户选择，而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...

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