PDA

View Full Version : Display Content While No Tab is Active



darkwolfe
5 Nov 2010, 8:02 AM
I've created a small plugin that will allow you to apply some HTML or an Ext panel to a tab panel when no tab is active. I created this plugin because there are some times when I need a tab panel but don't want a tab to be active when the tab panel is rendered. It's pretty easy to use, just create a new instance of the plugin and assign it to the plugin array of the tab panel you want to use it on. I have included some screenshots and a zip file containing the source and an example.

To create the plugin using HTML content:


var defaultTabPanel1 = new Ext.ux.plugins.TabPanelDefaultPanel({
html: '<span style="text-align:center;font-size:850%;font-weight:900;">TEST</span>',
});


Tp create the plugin using an Ext panel config option:


var defaultTabPanel2 = new Ext.ux.plugins.TabPanelDefaultPanel({
panel: {
title: '<div style="margin:3px;font-size:20px"><b><i>Sample Test Form</i></b></div>',
layout: 'form',
autoScroll: true,
border: true,
defaultType: 'textfield',
defaults: { anchor: '90%', allowBlank: false },
items: [
new Ext.form.TextField({ name: 'textfield1', fieldLabel: 'Text Field 1' }),
new Ext.form.TextField({ name: 'textfield2', readOnly: true, fieldLabel: 'Text Field 2' }),
new Ext.form.TextArea({ name: 'textarea1', height: 200, fieldLabel: 'Text Area 1' })
]
}
});


There is a function that will deactivate the current tab which will cause the plugin to be shown:


defaultTabPanel1.showPanel();


If you create the plugin with both an HTML and panel parameter, the HTML will take priority and the panel parameter will be ignored.

I've tested this with ExtJS 2.x and 3.x and it works normally in both enviroments.

Let me know what you think.