ext的treePanel触发tabPanel

最新推荐文章于 2019-04-11 16:53:17 发布
最新推荐文章于 2019-04-11 16:53:17 发布
阅读量304 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：https://yq.aliyun.com/articles/652380
版权

最终的效果如下图所描述
image
image
image
image
image
image
上述效果的实现过程如下所示
直接上代码
image
如上图所示，我们点击treePanel触发tabPanel的变化，因此肯定是treePanel中添加了事件响应的代码
没错，就是这个
image
image
它的具体代码如下

//鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
var tab = Ext.getCmp("centerPanelId");
//判断被点击的treePanel的item的类型，是否为leaf
if (record.get('leaf')) {
    //获取treePanel的item的id(也就是菜单的唯一标识)
    var id = record.get('id');
    var text = record.get('text');

    if (Ext.getCmp(id)){
        //如果这个tab已经被添加过一次就不再添加第二次
        //Ext.Msg.alert("已经有");
        tab.setActiveTab(id);
    }else{
        //如果只是第一次被添加，那就把新的panel添加到tabPanel中去
        var newTab = null;
        newTab = Ext.create("Ext.panel.Panel",{
            id:id,
            autoDestroy:true,
            title:text,
            closable:true
        });
       
        var rTab = tab.add(newTab);
     
        tab.setActiveTab(rTab);
    }
 }

我们说的再具体一点，主页面是一个viewport，其中包括左侧一个treepanel右侧一个tabPanel
点击treepanel的leaf后，会触发右侧tabPanel添加相应数据信息的tab
当然，前提是我们事先使用store为viewport主页提供了treePanel的数据。
下面公布所有代码
viewport的代码


Ext.define('MyApp.view.MainVP', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.mainvp',

    requires: [
        'Ext.toolbar.Toolbar',
        'Ext.tree.Panel',
        'Ext.tree.View',
        'Ext.tab.Panel',
        'Ext.tab.Tab'
    ],

    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    height: 103,
                    itemId: 'topPanel',
                    title: 'PWST服务系统',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'bottom',
                            itemId: 'topToolBar',
                            items: [
                                {
                                    xtype: 'button',
                                    itemId: 'agentBTN',
                                    text: '代理店'
                                },
                                {
                                    xtype: 'button',
                                    itemId: 'orgBTN',
                                    text: '组织'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    split: false,
                    frame: true,
                    id: 'leftAgentTreeId',
                    itemId: 'leftAgentTree',
                    width: 180,
                    collapsed: false,
                    collapsible: true,
                    title: '导航栏',
                    store: 'LeftAgentStore',
                    viewConfig: {
                        itemId: 'leftAgentTreeView'
                    },
                    listeners: {
                        itemclick: {
                            fn: me.agentTreeItemClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    split: false,
                    frame: true,
                    hidden: true,
                    itemId: 'leftOrgTree',
                    width: 180,
                    collapsed: false,
                    collapsible: true,
                    title: 'PWST组织',
                    store: 'LeftOrgStore',
                    viewConfig: {
                        itemId: 'leftOrgTreeView'
                    }
                },
                {
                    xtype: 'tabpanel',
                    region: 'center',
                    id: 'centerPanelId',
                    itemId: 'centerPanel',
                    activeTab: 0,
                    items: [
                        {
                            xtype: 'panel',
                            id: 'tab1id',
                            itemId: 'tab1',
                            title: '任务'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
        /*
        var rid = "uselessStr";
           rid = record.raw.id;
        if (rid.indexOf("agent") != -1){
            //包含agent字符串，所以什么也不做
            //Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text);
        }else{
            //不包含agent字符串，所以显示
            Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text+"  record.raw.leaf:"+record.raw.leaf);
        }
        // dataview.getItemId()显示treePanel拥有的view的itemid
        */

        /*
        下面是比较好一点的代码
        var bsign = record.raw.leaf;

        if(bsign===true){
            var n = Ext.getCmp("barneyId").getItemId();
            //var n = true;
            Ext.Msg.alert("测试leaf","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text+"  record.raw.leaf:"+record.raw.leaf+"++"+n);

        }

        */
        //下面这句很显然写错了因为leftAgentTreeId是treePanel的id，而不是我们应该获取的tabPanel的id
        //var tab = Ext.getCmp("leftAgentTreeId");
        //鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
        var tab = Ext.getCmp("centerPanelId");
        //判断被点击的treePanel的item的类型，是否为leaf
        if (record.get('leaf')) {
            //获取treePanel的item的id(也就是菜单的唯一标识)
            var id = record.get('id');
            var text = record.get('text');

            if (Ext.getCmp(id)){
                //如果这个tab已经被添加过一次就不再添加第二次
                //Ext.Msg.alert("已经有");
                tab.setActiveTab(id);
            }else{
                //如果只是第一次被添加，那就把新的panel添加到tabPanel中去
                var newTab = null;
                newTab = Ext.create("Ext.panel.Panel",{
                    id:id,
                    autoDestroy:true,
                    title:text,
                    closable:true
                });
                //Ext.Msg.alert("Note","没有这个tab   ++   ");
                var rTab = tab.add(newTab);
                //Ext.Msg.alert("Note","rTab.id   "+rTab.getId()+"  rTab.title   "+rTab.title+"   tab.id   "+tab.getId()+"  tab.title   "+tab.title);
                tab.setActiveTab(rTab);
            }
         }



    }

});

然后是store的代码

Ext.define('MyApp.store.LeftAgentStore', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'LeftAgentStore',
            root: {
                text: '代理店',
                id: 'agent-root',
                expanded: true,
                children: [
                    {
                        text: '北京代理店',
                        id: 'agent-bj',
                        expanded: true,
                        children: [
                            {
                                text: '详细信息',
                                id: 'detailInfo-bj',
                                leaf: true
                            },
                            {
                                text: '团队',
                                id: 'groupInfo-bj',
                                leaf: true
                            },
                            {
                                text: '文件夹',
                                id: 'folderInfo-bj',
                                leaf: true
                            }
                        ]
                    },
                    {
                        text: '上海代理店',
                        id: 'agent-sh',
                        expanded: true,
                        children: [
                            {
                                text: '详细信息',
                                id: 'detailInfo-sh',
                                leaf: true
                            },
                            {
                                text: '团队',
                                id: 'groupInfo-sh',
                                leaf: true
                            },
                            {
                                text: '文件夹',
                                id: 'folderInfo-sh',
                                leaf: true
                            }
                        ]
                    }
                ]
            },
            fields: [
                {
                    name: 'text'
                }
            ]
        }, cfg)]);
    }
});

下面我们对上述代码进行完善，效果如下图所示：
image
image
也就是说，当我们点击不同的treePanel的leaf的时候，在center位置显示不同结构的panel
首先创建不同的view，也就是panel，如下图所示
分别对应显示详细信息、团队、文件夹这三部分信息
image
那么怎么在viewport中调用这三个panel呢？
也就是在主页面中调用其它页面，加载进来呢？
首先我们刚刚创建的三个panel要先起一个alias也就是别名
image
这样方便我们在viewport中使用js代码去创建它
然后
我们查看viewport中的代码，毕竟只是前端代码，数据就造假了

        var tab = Ext.getCmp("centerPanelId");
        //判断被点击的treePanel的item的类型，是否为leaf
        if (record.get('leaf')) {
            //获取treePanel的item的id(也就是菜单的唯一标识)
            var id = record.get('id');
            var text = record.get('text');

            if (Ext.getCmp(id)){
                //如果这个tab已经被添加过一次就不再添加第二次
                //Ext.Msg.alert("已经有");
                tab.setActiveTab(id);
            }else{
                //如果只是第一次被添加，那就把新的panel添加到tabPanel中去
                var newTab = null;
                if(id==="detailInfo-bj"){
                    newTab = Ext.create("widget.bjdetailpanel");
                }else if(id==="groupInfo-bj"){
                    newTab = Ext.create("widget.bjgrouppanel");
                }else if(id==="folderInfo-bj"){
                    newTab = Ext.create("widget.bjfolderpanel");
                }
            
                var rTab = tab.add(newTab);

                tab.setActiveTab(rTab);
            }

我们依据treePanel的item的id进行判断，如果是第一次遇到这个tree叶子的被点击，我们创建对应内容的component
Ext.create("别名");
于是我们将所有代码改变一下

Ext.define('MyApp.view.MainVP', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.mainvp',

    requires: [
        'Ext.tree.Panel',
        'Ext.tree.View',
        'Ext.tab.Panel',
        'Ext.tab.Tab',
        'Ext.grid.Panel',
        'Ext.grid.column.CheckColumn',
        'Ext.grid.column.Boolean',
        'Ext.grid.column.Date',
        'Ext.grid.View',
        'Ext.toolbar.Paging'
    ],

    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    height: 103,
                    itemId: 'topPanel',
                    title: 'PWST服务系统',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'bottom',
                            itemId: 'topToolBar',
                            items: [
                                {
                                    xtype: 'button',
                                    itemId: 'agentBTN',
                                    text: '代理店'
                                },
                                {
                                    xtype: 'button',
                                    itemId: 'orgBTN',
                                    text: '组织'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    split: false,
                    frame: true,
                    id: 'leftAgentTreeId',
                    itemId: 'leftAgentTree',
                    width: 180,
                    collapsed: false,
                    collapsible: true,
                    title: '导航栏',
                    store: 'LeftAgentStore',
                    viewConfig: {
                        itemId: 'leftAgentTreeView'
                    },
                    listeners: {
                        itemclick: {
                            fn: me.agentTreeItemClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    split: false,
                    frame: true,
                    hidden: true,
                    itemId: 'leftOrgTree',
                    width: 180,
                    collapsed: false,
                    collapsible: true,
                    title: 'PWST组织',
                    store: 'LeftOrgStore',
                    viewConfig: {
                        itemId: 'leftOrgTreeView'
                    }
                },
                {
                    xtype: 'tabpanel',
                    region: 'center',
                    split: false,
                    id: 'centerPanelId',
                    itemId: 'centerPanel',
                    activeTab: 0,
                    items: [
                        {
                            xtype: 'panel',
                            id: 'myTaskId',
                            itemId: 'myTask',
                            margin: 2,
                            autoScroll: true,
                            collapsible: true,
                            title: '任务',
                            items: [
                                {
                                    xtype: 'panel',
                                    frame: true,
                                    height: 826,
                                    margin: '',
                                    width: 1650,
                                    collapsible: true,
                                    title: '我的任务',
                                    items: [
                                        {
                                            xtype: 'gridpanel',
                                            height: 790,
                                            margin: 1,
                                            title: '列表',
                                            store: 'MyTaskStore',
                                            columns: [
                                                {
                                                    xtype: 'checkcolumn',
                                                    width: 70,
                                                    dataIndex: 'checkId',
                                                    text: ''
                                                },
                                                {
                                                    xtype: 'booleancolumn',
                                                    width: 74,
                                                    dataIndex: 'bSign',
                                                    text: '标识'
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    dataIndex: 'activityName',
                                                    text: '名称'
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    width: 301,
                                                    dataIndex: 'objName',
                                                    text: '主题'
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    dataIndex: 'workflowState',
                                                    text: '工作流状态'
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    dataIndex: 'activityState',
                                                    text: '任务状况'
                                                },
                                                {
                                                    xtype: 'datecolumn',
                                                    height: '',
                                                    dataIndex: 'fDate',
                                                    text: '日期'
                                                }
                                            ],
                                            dockedItems: [
                                                {
                                                    xtype: 'pagingtoolbar',
                                                    dock: 'bottom',
                                                    width: 360,
                                                    displayInfo: true,
                                                    store: 'MyTaskStore'
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    agentTreeItemClick: function(dataview, record, item, index, e, eOpts) {
        /*
        var rid = "uselessStr";
           rid = record.raw.id;
        if (rid.indexOf("agent") != -1){
            //包含agent字符串，所以什么也不做
            //Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text);
        }else{
            //不包含agent字符串，所以显示
            Ext.Msg.alert("菜单信息","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text+"  record.raw.leaf:"+record.raw.leaf);
        }
        // dataview.getItemId()显示treePanel拥有的view的itemid
        */

        /*
        下面是比较好一点的代码
        var bsign = record.raw.leaf;

        if(bsign===true){
            var n = Ext.getCmp("barneyId").getItemId();
            //var n = true;
            Ext.Msg.alert("测试leaf","record.raw.id:"+record.raw.id+"  record.raw.text:"+record.raw.text+"  record.raw.leaf:"+record.raw.leaf+"++"+n);

        }

        */
        //下面这句很显然写错了因为leftAgentTreeId是treePanel的id，而不是我们应该获取的tabPanel的id
        //var tab = Ext.getCmp("leftAgentTreeId");
        //鼠标点击treePanel的item，然后触发tabPanel新增tab，所以必须首先获取tabPanel的对象
        var tab = Ext.getCmp("centerPanelId");
        //判断被点击的treePanel的item的类型，是否为leaf
        if (record.get('leaf')) {
            //获取treePanel的item的id(也就是菜单的唯一标识)
            var id = record.get('id');
            var text = record.get('text');

            if (Ext.getCmp(id)){
                //如果这个tab已经被添加过一次就不再添加第二次
                //Ext.Msg.alert("已经有");
                tab.setActiveTab(id);
            }else{
                //如果只是第一次被添加，那就把新的panel添加到tabPanel中去
                var newTab = null;
                if(id==="detailInfo-bj"){
                    newTab = Ext.create("widget.bjdetailpanel");
                }else if(id==="groupInfo-bj"){
                    newTab = Ext.create("widget.bjgrouppanel");
                }else if(id==="folderInfo-bj"){
                    newTab = Ext.create("widget.bjfolderpanel");
                }
                //newTab = Ext.create("widget.agentdetail");
                /*
                newTab = Ext.create("Ext.panel.Panel",{
                    id:id,
                    autoDestroy:true,
                    title:text,
                    closable:true
                });
                */
                //Ext.Msg.alert("Note","没有这个tab   ++   ");
                var rTab = tab.add(newTab);
                //Ext.Msg.alert("Note","rTab.id   "+rTab.getId()+"  rTab.title   "+rTab.title+"   tab.id   "+tab.getId()+"  tab.title   "+tab.title);
                tab.setActiveTab(rTab);
            }
         }



    }

});

第一个tab分页

Ext.define('MyApp.view.BJAgentDetailPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bjdetailpanel',

    requires: [
        'Ext.panel.Panel'
    ],

    frame: true,
    height: 513,
    id: 'detailInfo-bj',
    margin: '',
    width: 776,
    closable: true,
    title: '北京代理店详细信息',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    frame: true,
                    height: 181,
                    margin: 2,
                    title: '业务属性'
                },
                {
                    xtype: 'panel',
                    frame: true,
                    height: 282,
                    margin: 2,
                    title: '系统属性'
                }
            ]
        });

        me.callParent(arguments);
    }

});

第二个tab分页

Ext.define('MyApp.view.BJFolderPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bjfolderpanel',

    requires: [
        'Ext.tree.Panel',
        'Ext.tree.View',
        'Ext.grid.Panel',
        'Ext.grid.column.Number',
        'Ext.grid.column.Date',
        'Ext.grid.column.Boolean',
        'Ext.grid.View'
    ],

    height: 504,
    id: 'folderInfo-bj',
    margin: 2,
    width: 866,
    layout: 'border',
    closable: true,
    title: '北京代理店文件夹',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'treepanel',
                    margins: '',
                    region: 'west',
                    margin: 2,
                    width: 150,
                    collapsible: true,
                    title: '文件夹',
                    viewConfig: {

                    }
                },
                {
                    xtype: 'gridpanel',
                    region: 'center',
                    margin: 2,
                    title: '文件夹内容',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            text: 'Number'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Date'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Boolean'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

第三个tab分页

Ext.define('MyApp.view.BJGroupPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bjgrouppanel',

    height: 250,
    id: 'groupInfo-bj',
    width: 400,
    closable: true,
    title: '北京代理店服务团队',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    }

});

然后补充一个题外话，就是viewport中center位置的tab实际上是一个gridPanel
我们添加了一个store为它提供案例数据
store的代码如下

Ext.define('MyApp.store.MyTaskStore', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyTaskStore',
            data: [
                {
                    checkId: 0,
                    bSign: false,
                    activityName: '编制',
                    objName: '服务流程-FD18100001',
                    workflowState: '正在工作',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '批准',
                    objName: '服务流程-FD18100002',
                    workflowState: '审阅中',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '作成',
                    objName: '服务流程-FD18100003',
                    workflowState: '已发布',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '编制',
                    objName: '服务流程-FD18100004',
                    workflowState: '报价',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '问题处理',
                    objName: '服务流程-FD18100005',
                    workflowState: '实施',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: false,
                    activityName: '编制',
                    objName: '服务流程-FD18100006',
                    workflowState: '正在工作',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '批准',
                    objName: '服务流程-FD18100007',
                    workflowState: '审阅中',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '作成',
                    objName: '服务流程-FD18100008',
                    workflowState: '已发布',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '编制',
                    objName: '服务流程-FD18100009',
                    workflowState: '报价',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '问题处理',
                    objName: '服务流程-FD18100010',
                    workflowState: '实施',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: false,
                    activityName: '编制',
                    objName: '服务流程-FD18100011',
                    workflowState: '正在工作',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '批准',
                    objName: '服务流程-FD18100012',
                    workflowState: '审阅中',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '作成',
                    objName: '服务流程-FD18100013',
                    workflowState: '已发布',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '编制',
                    objName: '服务流程-FD18100014',
                    workflowState: '报价',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '问题处理',
                    objName: '服务流程-FD18100015',
                    workflowState: '实施',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: false,
                    activityName: '编制',
                    objName: '服务流程-FD18100016',
                    workflowState: '正在工作',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '批准',
                    objName: '服务流程-FD18100017',
                    workflowState: '审阅中',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '作成',
                    objName: '服务流程-FD18100018',
                    workflowState: '已发布',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 1,
                    bSign: true,
                    activityName: '编制',
                    objName: '服务流程-FD18100019',
                    workflowState: '报价',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                },
                {
                    checkId: 0,
                    bSign: true,
                    activityName: '问题处理',
                    objName: '服务流程-FD18100020',
                    workflowState: '实施',
                    activityState: '已完成',
                    fDate: '10/12/2018'
                }

            ],
            fields: [
                {
                    name: 'checkId'
                },
                {
                    name: 'bSign'
                },
                {
                    name: 'activityName'
                },
                {
                    name: 'objName'
                },
                {
                    name: 'workflowState'
                },
                {
                    name: 'activityState'
                },
                {
                    name: 'fDate'
                }
            ]
        }, cfg)]);
    }
});
weixin_34061555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
treepanel 和 tabpanel 完整
09-09
在本文中，我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件，并讨论如何将它们结合在一起，以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据，而`TabPanel`则提供了多标签页的功能，两者...
再探Ext中TreePanel控件和TabPanel控件搭配测试
03-05
在本文中，我们将深入探讨ExtJS库中的两个关键组件——TreePanel和TabPanel，并了解如何将它们有效地结合在一起，以实现更丰富的用户界面。ExtJS是一个强大的JavaScript框架，用于构建富客户端应用程序，提供了多种...
Extjs 菜单树、如何单击树弹出tab、如何用DataView显示图片
ama7449的博客
10-10 164
效果图片： 树菜单的建立，这里将动态树的产生： 声明：homeTree var homeTree = new Neo.index.HomeTree({ collapsible : true, split : true, margins : '5 0 5 5', cmargins : '5 5 5 5' }); 其中这个Neo.ind...
extjs中treepanel和tabpanel结合实现布局
且行且珍惜
04-27 542
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_LayoutPage1.cshtml"; }@section Script{ <script> Ext.onReady(panelLayout); function panelLayout() { //新建tabpa
Extjs中通过Tree加载右侧TabPanel具体实现
evilcry2012的专栏
07-12 657
Extjs中通过Tree加载右侧TabPanel具体实现 作者： 字体：[增加 减小] 类型：转载 时间：2013-05-05 我要评论 用Extjs4.1来做界面，有关Extjs4.1资料在网上也相对来说较少，下面是具体的实现代码1.左侧的功能树2.需要打开的对应的view，有类似需求的朋友可以参考下哈 最近在做一个物流管理的项目，公司必须要求用Extjs4
Sencha-touch之TabPanel的Tab在点击时执行事件
渡江人博客
12-13 176
前面一直很忙，忙了快有一年了，学习了很多东西，也没有系统的整理一下，现在开始逐渐的将自己的一些学习的心得一点一点的记录下来。   Sencha-touch的前身是ExtJs，前几年我一直在做ExtJs的方面的扩展开发，现在由于自己的项目，做移动端的跨平台开发，因此用到了Sencha-touch。   Sencha-touch中TabPanel的使用频率应该是很高的了，一般的应用应该都会用到...
extjs tabpanel 双击事件
shuangmu09的专栏
04-06 1605
Extjs tabpanel
Ext TreePanel
01-24
【Ext TreePanel】是Ext JS库中的一个组件，主要用于展示层次结构的数据，比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图，用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中，TreePanel...
Ext TreePanel Checked Ext复选框树
12-13
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式，它扩展了基本的树视图，加入了复选框功能。 复选框树（Checked Tree）允许用户通过复选框来选择或取消选择树结构中的节点。这种...
asp.net ext treepanel 动态加载XML的实现方法
10-30
在ASP.NET环境中，使用Ext JS的TreePanel组件展示数据时，你可能会遇到一个问题，即尝试直接从服务器加载XML文件，但树形结构无法正确显示或数据加载失败。这个问题通常是由于跨域限制、数据格式不正确或者服务器端...
使用 Ext.Net TreePanel,TabPanel控件 布局
weixin_34234829的博客
05-17 117
<%@ Page Language="C#" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %> <!DOCTYPE html...
控制tabs 打开的数量！
weixin_33755649的博客
10-17 328
  //用下面的方法得到当前TAB的总数量  var tabcount = $('#tabs').tabs('tabs').length;修改addTab 方法为： function addTab(subtitle, url, icon) {    var tabCount = $('#tabs').tabs('tabs').length;　　// 获取当前打开窗口总数量    var has...
Ext中TablePanle只能获取ActiveTab的对象
weixin_34413065的博客
10-08 117
2019独角兽企业重金招聘Python工程师标准>>> ...
Ext.tree.Panel6.2
NewOnexs的博客
04-11 517
关于ext6.2的Ext.tree.PanelExt.tree.Panel一些重要的配置数据结构1代码块1数据结构2代码块2效果图 Ext.tree.Panel一些重要的配置 最近一段时间一直在学习ext6.2版本, 是一个不折不扣的ext新手（之前的版本都没有接触过），官网和百度都没有找到相应的中文文档，所以学些起来比较吃力，特别是在学习Ext.tree.Panel树结构这一块的时候，但最终还是...
Ext.tree.TreePanel
youshini的专栏
12-12 147
转载：http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx 个人只是进行了测试，理解而已。原文中使用的数据库是SQL 2000的，而本人使用的是mysql，故做了一点点的更改。 【注意】：以下所有引用资源的路径都是根据自己的资源位置来配置的。 第一步：创建treePanel.html Code: &lt;!D...
ext桌面的刷新和打开tab兼容
wubing227107的博客
07-22 534
这几天烦死我了，用ext框架撘的桌面刷新和打开tab老是不能兼容，网上查了好多，都没有相关的资料，但是哈哈，经过我不懈的努力，终于成功了。 现在说说我的思想： 1.主页面是一开始就打开的，加了监听activate，即激活时把主页面删除 2.打开的tab也加了监听activate，激活时删除其他tab，重新加载主页 var loginError = context+"/loginError....
ExtJs之结构树 Ext.tree.panel详细用法
热门推荐
idomyway的博客
12-10 1万+
1.简单的树 效果图 代码 [javascript] view plain copy print? "text/javascript" defer>      Ext.onReady(function(){          Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';    
Ext.tree.Panel 点击事件
fanpeii的专栏
12-12 7236
无标题文档 Ext.onReady(main); function main() { function tree_event(node,event) { var id=event.data.id; Ext.Msg.show({ title:'提示', msg:'你单击了'+id, }); }; var tr
《ExtJS2.0实用简明教程》之TreePanel基本使用
zhiming_817的专栏
03-02 146
在应用程序中，我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息、地区信息，或者是树状的菜单信息，操作系统中的文件夹信息等。　　对于传统的html页面来说，要自己实现显示树比较困难，需要写很多的javascript，特别是对于基于Ajax异步加载的树来说，不但涉及到Ajax数据加载及处理技术，还需要考虑跨浏览器支持等，处理起来非常麻烦。ExtJS中提供了现存的树控件，通过这些控件可以在B...
ext的treepanel监听事件有哪些，请全部列出来
最新发布
07-14
1. `beforeitemappend`：在节点被添加到 TreePanel 前触发。 2. `beforeitemcollapse`：在节点被折叠前触发。 3. `beforeitemexpand`：在节点被展开前触发。 4. `beforeiteminsert`：在节点被插入到 TreePanel 前...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值