Hybrid View

  1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    5
    Vote Rating
    0
    fabsen2102 is on a distinguished road

      0  

    Default (Complex) Layout in DIV

    (Complex) Layout in DIV


    Hi!

    I'm absolutely new to extjs.

    I want to include a "complex" Layout within a DIV. So the Layout should have two regions (west and center). The west-DIV should be collapsible.

    As I understood it is only possible with a viewport. But how to include a Viewport within a panel. Cause I read that a viewport is always for the whole browser-window.

    At the moment I've got the following code:

    Code:
    Simple = function() {
                return {
                    init : function() {
                        new Ext.Panel({
                        applyTo:'ticketDetails',
                        items: [{
                                region: 'west',
                                collapsible: true,
                                title: 'Navigation',
                                width: 200
                                // the west region might typically utilize a TreePanel or a Panel with Accordion layout
                            }, {
                                region: 'center',
                                xtype: 'tabpanel', // TabPanel itself has no title
                                items: {
                                    title: 'Default Tab',
                                    html: 'The first tab\'s content. Others may be added dynamically'
                                }
                            }
                        ]
                    });
                    }
                };
            }();
            Ext.EventManager.onDocumentReady(Simple.init, Simple, true);
    But thats not want I really want

    Thanks for your help!

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    That's not complex!

    And why do you think you need a Viewport?

    You just need a Container.

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    5
    Vote Rating
    0
    fabsen2102 is on a distinguished road

      0  

    Default


    OK, I'm sorry. I thought so because I read I need to

    Could you please help me a little.
    I need to add a container first and then !??? - two Items directly in the container or first two panels?

    With the following code I get two DIVs but without a chance to collapse..
    Code:
    new Ext.Container({
                            applyTo:'ticketDetails',
                            autoEl: 'div',  // This is the default
                            layout: 'column',
                            defaults: {
                                // implicitly create Container by specifying xtype
                                xtype: 'container',
                                autoEl: 'div', // This is the default.
                                layout: 'form',
                                columnWidth: 0.5,
                                style: {
                                    padding: '5px'
                                }
                            },
                            items: [{
                                items: {
                                    collapsible: true,
                                    title: 'Left Side',
                                    name: 'leftside',
                                    html: 'The first tab'
                                }
                            }, {
                                items: {
                                    title: 'Default Tab',
                                    name: 'rightside',
                                    html: 'The second tab'
                                }
                            }]
                        });
    I can't add a layout border.. how does it work?

Thread Participants: 1