当前位置：文江博客话题详情

如何使用 extjs 将我自己的状态消息添加到选项卡面板

发布于 2024-10-20 19:22:14 字数 74 浏览 3 评论 0原文

我正在开发一个项目，使用 ui 作为纯 extjs。我面临一个问题，我只想将自己的状态消息添加到 extjs 中的选项卡面板。请帮我。

原文

分享到QQ

分享到微博

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

发布评论

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

故乡的云 2024-10-27 19:22:14

每个扩展 Ext.Panel 的组件都接受一个名为 bbar 的配置选项，它是底部的 Ext.Toolbar。如果您愿意，它可以用作 TabPanel 的状态栏。检查 Ext.Panel 和 Ext.Toolbar 了解更多信息。

new Ext.Panel({
    title: 'Basic StatusBar',
    items:[{
        xtype: 'button',
        text: 'a button',
    }],
    bbar: ['->', 'Status bar']
});

如果您正在寻找更多功能，您还可以查看官方 Statusbar扩展，您可以找到官方ExtJS示例在 sencha.com 上

Each Component extending Ext.Panel accepts a config option called bbar which is the bottom Ext.Toolbar. this can function as a statusbar for your TabPanel if you want to. Check the docs on Ext.Panel and Ext.Toolbar for more info.

new Ext.Panel({
    title: 'Basic StatusBar',
    items:[{
        xtype: 'button',
        text: 'a button',
    }],
    bbar: ['->', 'Status bar']
});

If you are looking for more functionality you could also check out the official Statusbar Extension which you can find the official ExtJS Examples on sencha.com

回复收藏 0 原文

我一直都在从未离去 2024-10-27 19:22:14

您可以从 Firebug 控制台的 ExtJS 包含页面运行它吗？这不是一个好方法，但是可以满足您的需求。

// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
    var msgEl = document.getElementById('tabPanelStatusMessage');
    if (msgEl) {
        msgEl.innerHTML = msg;
    }
    // style rules of span should be given with a css class 
    return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
    title: 'test window',
    width: 600,
    height: 400,
    items: {
        xtype: 'tabpanel',
        activeTab: 0,
        id: 'statusTabPanel',
        items: [
            {
                title: 'test',
                html: 'this is a demo tab panel item'
            }
        ]
    },
    listeners: {
        afterrender: function(){
            Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
        }
    }
}).show();

// you can call updateStatusMessage function with a message to update the message

Can you run it from Firebug console an ExtJS included page. It is not a good way for this but, achieves your need.

// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
    var msgEl = document.getElementById('tabPanelStatusMessage');
    if (msgEl) {
        msgEl.innerHTML = msg;
    }
    // style rules of span should be given with a css class 
    return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
    title: 'test window',
    width: 600,
    height: 400,
    items: {
        xtype: 'tabpanel',
        activeTab: 0,
        id: 'statusTabPanel',
        items: [
            {
                title: 'test',
                html: 'this is a demo tab panel item'
            }
        ]
    },
    listeners: {
        afterrender: function(){
            Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
        }
    }
}).show();

// you can call updateStatusMessage function with a message to update the message

回复收藏 0 原文

~没有更多了~