将不可选择的文本选项卡添加到 Ext.TabPanel？

发布于 2024-12-12 01:47:50 字数 713 浏览 5 评论 0原文

我正在尝试创建一个 TabPanel，它在选项卡旁边有一个文本标题。也就是说，

我想要的不是 |Tab1|Tab2|Tab3|Tab4|，而是 Text Here |Tab1|Tab2|Tab3|Tab4|

文本不应该被选择为一个选项卡，那么我该怎么做呢？

目前，我的 TabPanel 是这样的：

new Ext.TabPanel({
    id: 'lift-template',
    defaults: {
        items:[
            {
                xtype: 'list',
                store: myStore,
                itemCls: 'my-row',
                itemTpl: '<p><span class="blah">{variable}</span></p>'
            }
        ]
    },
    items: [
        {title:'Week'},
        {title: '1'},
        {title: '2'},
        {title: '3'},
        {title: '4'}
    ]
});

如何添加不是真正选项卡的项目，或者至少禁用激活？

原文

I'm trying to create a TabPanel that has a text header just beside the tabs. That is, instead of

|Tab1|Tab2|Tab3|Tab4|, I want Text Here |Tab1|Tab2|Tab3|Tab4|

The text shouldn't be selectable as a tab, so how do I do this?

Currently, my TabPanel is this:

new Ext.TabPanel({
    id: 'lift-template',
    defaults: {
        items:[
            {
                xtype: 'list',
                store: myStore,
                itemCls: 'my-row',
                itemTpl: '<p><span class="blah">{variable}</span></p>'
            }
        ]
    },
    items: [
        {title:'Week'},
        {title: '1'},
        {title: '2'},
        {title: '3'},
        {title: '4'}
    ]
});

How do I add an item that isn't a true tab, or at least disable activation?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

能怎样 2024-12-19 01:47:51

与 SeanA 提供的答案有点相似，这是 Sencha Touch (1.1) 的修改版。

查看示例

/**
 * We will just need to extend the original tabpanel to
 * have the ability to create extra text node in front
 * of all the tabs (Check Ext.TabBar)
 */
var FunkyTabPanel = Ext.extend(Ext.TabPanel, {
    initComponent: function() {

        //we need it to initialize the tab bar first
        FunkyTabPanel.superclass.initComponent.call(this);

        //Then we hack in our text node. You can add cls/style too
        this.tabBar.insert(0, {
            text: this.title,
            style: 'color:#fff;'
        });
    }
});

Slighly similar to the answer provided by SeanA, this is the modified one for Sencha Touch (1.1).

Check out the example

/**
 * We will just need to extend the original tabpanel to
 * have the ability to create extra text node in front
 * of all the tabs (Check Ext.TabBar)
 */
var FunkyTabPanel = Ext.extend(Ext.TabPanel, {
    initComponent: function() {

        //we need it to initialize the tab bar first
        FunkyTabPanel.superclass.initComponent.call(this);

        //Then we hack in our text node. You can add cls/style too
        this.tabBar.insert(0, {
            text: this.title,
            style: 'color:#fff;'
        });
    }
});

回复收藏 0 原文

清浅ˋ旧时光 2024-12-19 01:47:50

我不会尝试使用选项卡的功能来侵入标签。您想要的只是一个标签，因此您可以查看 TabPanel 的源代码并找到一个方便的位置来添加它。

我刚刚查看了Ext.TabPanel（Ext 3.3.1）的源代码，onRender是创建选项卡条的方法，所以我要做的是创建Ext.TabPanel 的自定义扩展，将其命名为 MyApp.WeeksTabPanel，并重写 onRender 方法以在调用超类方法后添加标签。看起来您可能只需添加一个自定义范围作为 this.stripWrap 的第一个子项。

像这样的事情：

MyApp.WeeksTabPanel = Ext.extend(Ext.TabPanel, {

    onRender: function() {
        MyApp.WeeksTabPanel.superclass.onRender.apply(this, arguments);
        this.stripWrap.insertFirst({tag: 'span', html: 'Weeks:'});
    }

});

I wouldn't try to hack in a label using the functionality of a tab. All you want is a label, so you can probably look through the source code of TabPanel and find a conventient place to add this.

I just looked through the source of Ext.TabPanel (Ext 3.3.1), and onRender is the method where the tab strip is created, so what I would do is create a custom extension of Ext.TabPanel, call it MyApp.WeeksTabPanel, and override the onRender method to add your label after calling the superclass method. Looks like you might just add a custom span as the first child of this.stripWrap.

Something like this:

MyApp.WeeksTabPanel = Ext.extend(Ext.TabPanel, {

    onRender: function() {
        MyApp.WeeksTabPanel.superclass.onRender.apply(this, arguments);
        this.stripWrap.insertFirst({tag: 'span', html: 'Weeks:'});
    }

});

回复收藏 0 原文

~没有更多了~