CODEWITHSUNDEEP
javascriptextjsextjs4
Noon
Noon

Reputation: 1211

Extjs 4.1 - How to create tabpanel without window or container?

I would like to create tabpanel so it opens when I click on button. I can create it inside window like so:

var window = new Ext.Window({
            id: 'item1',
            closable: true,
            floating: true,
            collapsible: true,
            width: 900,
            height: 600,
            autoScroll: true,
        items  : mytabpanel

}).show();

but I am wondering how I can do it without window? it seems like show() doesn't work with tabpanel.

Upvotes: 1

Views: 717

Answers (2)

ivan133
ivan133

Reputation: 827

If you want a component to float you should use floating mixin

Upvotes: 0

Grant Clements
Grant Clements

Reputation: 984

I'm not entirely sure what you're trying to achieve, assuming your code to create the tab panel is correct then I don't see why your code wouldn't work.

If you don't want to render the tab panel in a window, you can always render it to an actual DOM element instead by using the renderTo property. e.g.

Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            renderTo: document.getElementById('component'),
            items: [{
                title: 'Foo'
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title',
                    tooltip: 'A button tooltip'
                }
            }]
        });

Where "component" is the id of a container element (E.g. a DIV) within your HTML page. If you call that within the onclick event of the button, hopefully it should do what you require.

Upvotes: 1

Related Questions