Results 1 to 10 of 10

Thread: BasicDialog without tabs

  1. #1

    Default BasicDialog without tabs

    Im trying to create dialog with white rectangle inside dialog box itself (like when you create it with tabs) but since its a single tab I dont want to display tab title. Here is how I do it:
    Code:
                    var dlg = new Ext.BasicDialog("VehiclesDlg", {
                            modal:true,
                            autoTabs:true,
                            width:500,
                            height:300,
                            shadow:true,
                            minWidth:300,
                            minHeight:250,
                            proxyDrag: false
                    });
    and here HTML:
    Code:
        <div id="VehiclesDlg" style="visibility:hidden;position:absolute;top:0px;">
            <div class="x-dlg-hd">Vehicle Options</div>
                <div class="x-dlg-tab" title="">
                    <div class="inner-tab">
                    <table border="0" cellpadding=0 cellspacing=3 style="font:bold 11px tahoma, arial, helvetica, sans-serif; color:#15428b">
                        <tr><td>VIN</td><td><input type="text" name="m_vin" class="x-form-text"></td>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    all is good here but it still shows empty tab title. How to get rid of it?

    Thanks.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Don't use markup which requests tabs!

    '<div class="x-dlg-tab">'?

    You need a dialog body: class "x-dlg-bd"

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    In addition to what Animal said, drop the autoTabs config option from your constructor.

    Aaron

  4. #4

    Default

    That didn't work. "x-dlg-bd" will create blue background dialog. What Im trying to achieve is white bordered box inside dialog where I will place all my controls. Just like tabbed dialog does except without tab headers (since I have only one tab).
    Let me try drawing what I need:
    HTML Code:
    +------------------------------------------------------
    |    Title                                             
    +------------------------------------------------------
    | +---------------------------------------------------
    | |   Param1: [text input element]       
    | |   Param2: [text input element]       
    | |                                                   
    | |                                                   
    | |   <white background with border>  
    | |                                                   
    | +---------------------------------------------------
    | <blue background>                           Submit     Cancel
    +-------------------------------------------------------

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

    Default

    You want white background, style your element.

  6. #6

    Default

    I did this:
    Code:
    <style>
    .itw-dlg{
        background:white;
        overflow:auto;
        border:1px solid #6593cf;
    }
    </style>
    
    .........
                    var dlg = new Ext.BasicDialog("VehiclesDlg", {
                            modal:true,
                            autoTabs:false,
                            width:500,
                            height:300,
                            shadow:true,
                            minWidth:300,
                            minHeight:250,
                            proxyDrag: false
                    });
    
    .........
    
        <div id="VehiclesDlg" style="visibility:hidden;position:absolute;top:0px;">
            <div class="x-dlg-hd">Vehicle Options</div>
                <div class="x-dlg-bd">
                    <div class="itw-dlg" style="height:220px">
                    <table border="0" cellpadding=0 cellspacing=3 style="font:bold 11px tahoma, arial, helvetica, sans-serif; color:#15428b">
                        <tr><td>VIN</td><td><input type="text" name="m_vin" class="x-form-text"></td>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    Problem here is I had to hardcode height of the "itw-dlg" div where in case of tabs everything sized automatically.
    Was hoping that something cleaner existed then hardcoding heights.

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

    Default

    Why not

    Code:
    <style>
    div#VehiclesDialog div.x-dlg-bd {
        background-color:white;
    }
    </style>
    
    
    ...
    
        <div id="VehiclesDlg" style="visibility:hidden;position:absolute;top:0px;">
            <div class="x-dlg-hd">Vehicle Options</div>
                <div class="x-dlg-bd">
                    <table border="0" cellpadding=0 cellspacing=3 style="font:bold 11px tahoma, arial, helvetica, sans-serif; color:#15428b">
                        <tr><td>VIN</td><td><input type="text" name="m_vin" class="x-form-text"></td>
                    </table>
                </div>
            </div>
        </div>
    ?

  8. #8

    Default

    Thank you! Thats exactly what I was looking for. Keep up good work guys.

    Cheerz

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    But isn't that basic CSS, the kind of thing that a trainee HTML monkey knows about?

  10. #10

    Default

    Have to admit that CSS is my weakest link here. Was doing all styling before using style attributes. Came from programming world: c,c++,Java and JavaScript soI kinda missed HTML monkey training. I guess its something I should spend more time.

    Thanks again.

Posting Permissions

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