extjs3.4:如何访问面板中没有 id/itemId 的项目

extjs3.4: How to access items in a panel that do not have id/itemId

本文关键字:id 项目 itemId 何访问 访问 extjs3      更新时间:2023-09-26

我刚开始使用ExtJS 3.4版本。而且我不确定在没有分配 id 或 itemId 的情况下如何访问面板中的项目。我以前使用过Ext JS 4.2,但现在我需要使用3.4版本。

就我而言,我在这里使用边框布局。我在东部区域有一个树面板,在中心区域有一个选项卡面板。我想根据单击的树节点使用网格或表单动态更新中心区域。

这是我的选项卡面板代码

{
                        xtype : 'tabpanel',
                        title : 'Center Panel',
                        width : 200,
                        region : 'center',
                        items:[gridpnl]
}

这是我尝试过的完整代码 第一个扩展页面 Ext.onReady(function () {

        Ext.namespace('Class');
        Class.create = function() {
            return this.init(config);
            }
        };
        Ext.namespace('FirstOOPS');
        FirstOOPS = Class.create();
        FirstOOPS.prototype = {
         init: function (config) {
                var store= new Ext.data.ArrayStore({
                fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
            });
            var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
            store.loadData(myData);
            var gridpnl= new Ext.grid.GridPanel({
                layout: 'fit',
                height: 500,
                width: 500,
                store: store,
                columns:[
                       {header: "C1", dataIndex: 'C1'},
                       {header: "C3", dataIndex: 'C3'},
                       {header: "C5", dataIndex: 'C5' }
                       ]
            });
            var mainPanel = new Ext.Panel({
            layout : 'border',
            items : [
    {
        region: 'east',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Grid',
                leaf: true
            }, {
                text: 'Form',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                if(n.text=='Grid'){
                Ext.Msg.alert(n.text);
            }
             }
        }
    },{
                    xtype : 'tabpanel',
                    title : 'Center Panel',
                    width : 200,
                    region : 'center',
                    items:[gridpnl]
    }
    ]
    });
            new Ext.Viewport({
                layout : 'fit',
                items : [mainPanel]
            });   
        }
    };
    var firstObj = new FirstOOPS();
    });
    </script>
    </body>
    </html>

有人可以告诉我如何在没有id的情况下访问它,以便我可以动态更新选项卡面板或根据树节点单击创建新选项卡。

提前致谢

您可以使用

以下代码访问选项卡面板,而无需使用 id 或项目 ID

this.up().items.items[1]

测试上面的代码,我通过以下代码提醒选项卡面板的标题

      alert(this.up().items.items[1].title);

它将提醒选项卡面板的标题