Question

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

Answer 1

扩展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 Extension，您可以在sencha.com找到官方ExtJS Examples

Answer 2

您可以从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

如何使用extjs将自己的状态消息添加到tabpanel

2 个答案: