Results 1 to 7 of 7

Thread: not quite what I expected: container layout issue

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default not quite what I expected: container layout issue

    The following code doesn't do what I expect. The button layout doesn't take up any vertical space but writes itself on top of the html Panel.

    Code:
    function NewPost(b,e)
    {
        b.disable();
        
        var ButtonLayout = new Ext.Container
        (
            {
                layout: 'column',
                height: 100,
                items: 
                [
                    {
                        autoEl: 
                        {
                            tag: 'div', children: 
                            [
                                {tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
                                {tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
                            ]
                        },
                        width: 610
                    },{
                        text: 'Save Post',
                        xtype: 'button',
                        style: 'margin:12px 5px 0px 0px',
                        handler: SavePost,
                        width: 75
                    },{
                        text: 'Cancel',
                        xtype: 'button',
                        style: 'margin:12px 0px',
                        handler: CancelPost,
                        width: 75
                    }
                ]
            }
        );
        if (typeof(KnowledgeBase.Forums.Forum.Thread.PostEdit) == "undefined")
        {
            Ext.ns('KnowledgeBase.Forums.Forum.Thread.PostEdit');
            Ext.QuickTips.init();  // enable tooltips
            KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window
            (
                {
                    title: 'Write New Post',
                    x:100,
                    y:100,
                    height:500,
                    frame: true,
                    width:920,
                    layout: 'border',
                    items: 
                    [
                        ButtonLayout,
                        {
                            xtype: 'htmleditor',
                            region: 'center',
                            enableColors: true,
                            enableAlignments: true,
                            id: 'htmlPostEditor',
                            height:350
                        }
                    ]
                }
            ); 
        }
        KnowledgeBase.Forums.BreadCrumb.add
        (
            "Write Post", "WritePost", function (bShow) 
            { 
                ShowHide(KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor, bShow);
                EnableDisable(Ext.getCmp('buttonNewPost'), !bShow);
            }, true
        );
        KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor.show();
    }
    

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default

    I have probably tried dozens of variations of this above. The HTML editor wants to dominate the window its in. No matter how I've nested these, my title text box and buttons either don't appear at all or they are written on top of the HTML panel.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Make the Window layout: 'border'.

    Put the button container and editor directly in as child items.

    The center region cannot accept a height. It is documented that it occupies any space not used by the border regions.

    Give the Button container a height. Do NOT overnest it with that extra, embedded Panel! And make it layout: 'table' for simplicity

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default Thanks, but it is still broken. Is this then a bug?

    I have done what you suggested. The table layout does help with the layout of the panel buttons, but is still renders on top of the htmlEditor window.

    Code:
    KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window
    (
        {
            title: 'Write New Post',
            layout: 'border',
            x:100,
            y:100,
            frame: true,
            width:900,
            height:500,
            items: 
            [
                {
                    region: 'north',
                    layout: 'table',
                    border:false,
                    height:60,
                    autoWidth:true,
                    cls: 'SD_Trans',
                    items:
                    [
                        {
                            autoEl: 
                            [
                                {tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
                                {tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
                            ],
                            width: 610
                        },{
                            text: 'Save Post',
                            xtype: 'button',
                            style: 'margin:12px 5px 0px 0px',
                            handler: SavePost,
                            width: 75
                        },{    
                            text: 'Cancel',
                            xtype: 'button',
                            style: 'margin:12px 5px 0px 0px',
                            handler: CancelPost,
                            width: 75
                        }
                    ]
                },
     
                {
                    xtype: 'htmleditor',
                    region: 'center',
                    enableColors: true,
                    enableAlignments: true,
                    id: 'htmlPostEditor'
                }
            ]
        }
    );

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Why not this?

    Code:
    new Ext.Window({
        title: 'Write New Post',
        layout: 'border',
        x: 100,
        y: 100,
        frame: true,
        width: 900,
        height: 500,
        items: [{
            xtype: 'container',
            style: {
                padding: '4px 0 0 4px'
            },
            region: 'north',
            layout: 'table',
            layoutConfig: {
                columns: 3
            },
            border: false,
            height: 30,
            autoWidth: true,
            cls: 'SD_Trans',
            items: [{
                xtype: 'container',
                layout: 'form',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'Post Title',
                    id: 'tbPostTitle',
                    width: 600
                }
            },
            {
                text: 'Save Post',
                xtype: 'button',
                width: 75,
                style: 'margin:0 0 4px 5px'
            },
            {
                text: 'Cancel',
                xtype: 'button',
                width: 75,
                style: 'margin:0 0 4px 5px'
            }]
        }, {
            xtype: 'htmleditor',
            region: 'center',
            enableColors: true,
            enableAlignments: true,
            id: 'htmlPostEditor'
        }]
    }).show();

  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200

    Default

    I working on doing it that way anyway using built-in ExtJS elements for the textbox (mine wasn't quite right yet, thank you) but when I assign the buttons and textbox to the 'north' region using your exact example it still overwrites the htmlEditor.

    If i put it south, where it doesn't quite make sense in my functionalilty, at least the layout works.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You might be hitting some of these layout issues that have been worked on over the past few days. Because that code worked perfectly here (in FF 3.5) or I wouldn't have posted it.

    I don't see why you use a layout with one child as a Panel containing buttons, and the other child as an editor.

    I'd use a layout: 'fit' Panel with a tbar. It's fitted child would be the editor.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •