Results 1 to 2 of 2

Thread: adding element to vbox snafu's layout

  1. #1

    Default adding element to vbox snafu's layout

    I just upgraded to 3.2.1 to solve a layout problem, and it killed my dynamic adding/subtracting of toolbar(vbox) elements. Now when I add a element, the vbox resizes correctly, but the footer (which has a couple button controls) displays OVER the final line. When I remove an element, it seems to work, except the footer line is aligned with the bottom of the penultimate element instead of a few pixels down. This all worked in 3.0.
    I suspect the problem is how I am redoing the layout in PopulateToolbar...it seems like whan I add a new QueryLine it positions itself below the last existing line BEFORE the new line is added to the layout...then the new line is added at its correct position which is UNDER the query_footer(Add_Execute). Is this somehow done asynchronously? Could that be causing this? How do I fix it?

    I have been using firefox 3.6.3. It doesn't work at all in IE with the following error (any ideas)?

    Also, I welcome any general suggestions/advice on my code...I still have alot to learn about Ext.

    Code:
    Webpage error details
    
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
    Timestamp: Thu, 27 May 2010 11:37:02 UTC
    
    Message: 'events' is null or not an object
    Line: 11912
    Char: 15
    Code: 0
    URI: http://iwebdev.ncbi.nlm.nih.gov/staff/charowha/ext-3.2.1/ext-all-debug.js
    and here is my js...

    Code:
    var query_items_array = [];
    var query_control_array = [];
    
    
    var color_choices = [ 'FF0000', '0000FF', '008000', '00FF00', '003366', '000080', '333399', '333333'
                        , '800000', '003300', '808000', '333300', '008080', '993300', '666699', '808080'
                        , '000000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696'
                        , 'FF00FF', 'FFCC00', 'FFFF00', 'FF6600', '00FFFF', '00CCFF', '993366', 'C0C0C0'
                        , 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'];
                        
    var query_sources = ['blah', 'blah-blah', 'foo', 'bar'];
    var query_source_default = 'blah';
    
    var toolbar = new Ext.Container({
              border: false
            , layout: 'vbox'
            , layoutConfig: {
                    align: 'stretch'
              }
            , defaults: {border: false}
        });
    
    var query_setup = {
              color_choices: color_choices
            , query_sources: query_sources
            , query_source_default: query_source_default
            , query_items_array: query_items_array
            , query_control_array: query_control_array
            , toolbar: toolbar
        };
    
    
    function PopulateQueryButton(source, button)
    {
        button.menu.removeAll();
        button.menu.addMenuItem({text: 'Loading Queries...'});
        
        //this was an ajax request that resulted in a menu populate.
        //removed for post...
    }
    
    
    function CreateQueryButton(source, query_destination)
    {
        var agg_menu = new Ext.menu.Menu({
                             items:[{text: 'Loading Queries...'}]
                       });
        var agg_button = new Ext.Button({
                              menu: agg_menu
                            , text: 'Queries'
                         });
        agg_button.query_destination = query_destination;
        
        PopulateQueryButton(source, agg_button);
        
        return agg_button;
    }
    
    
    function QuerySourceChangeHandler(menuitem)
    {
        menuitem.current_values.source = menuitem.text;
        PopulateQueryButton(menuitem.text, menuitem.target_button);
        menuitem.source_button.setText(menuitem.text);
    }
    
    
    //target_button is query_selector_button
    //setup.query_sources is array of possible choices
    function CreateQuerySourceButton(setup, current_values, target_button)
    {
        var source_menu = new Ext.menu.Menu({});
        var source_button = new Ext.Button({
                                  menu: source_menu
                                , text: setup.query_source_default
                             });
        for (var i = 0; i < setup.query_sources.length; ++i) {
            source_menu.addMenuItem({
                              text: setup.query_sources[i]
                            , handler: QuerySourceChangeHandler
                            , current_values: current_values
                            , target_button: target_button
                            , source_button: source_button
            });
        }
        return source_button;
    }
    
    
    function ChangeColor(palette, color)
    {
        palette.target.el.setStyle('background-color', '#' + color);
        palette.current_values.color = '#' + color;
    }
    
    
    function CreateColorButton(setup, style_target, current_values)
    {
        var agg_menu = new Ext.menu.ColorMenu({
              handler: ChangeColor
            , colors: setup.color_choices
            , value: setup.default_color
        });
        var agg_button = new Ext.Button({
                              menu: agg_menu
                            , text: 'color'
                         });
        agg_menu.palette.target = style_target;
        agg_menu.palette.current_values = current_values;
                         
        return agg_button;
    }
    
    
    function BotsChange(caller, value)
    {
        caller.current_values.no_bots_check = value;
        caller.current_values.ClearData();
    }
    
    
    function CreateBotsCheckbox(current_values)
    {
        return new Ext.form.Checkbox({
              checked: true
            , current_values: current_values
            , checkHandler: BotsChange
        });
    }
    
    function NoInternalChange(caller, value)
    {
        caller.current_values.no_bots_check = value;
        caller.current_values.ClearData();
    }
    
    
    function CreateNoInternalCheckbox(current_values)
    {
        return new Ext.form.Checkbox({
              checked: true
            , current_values: current_values
            , checkHandler: NoInternalChange
        });
    }
    
    
    function QueryChange(caller, newValue) 
    {
        caller.current_values.query = newValue;
        caller.current_values.ClearData();
    }
    
    
    function CreateQueryText(current_values)
    {
        return new Ext.form.TextField({
                                emptyText: 'Enter a query or select one on the right'
                              , columnWidth: .993
                              , current_values: current_values
                              , listeners: {
                                    change: QueryChange
                                }
                          });
    }
    
    
    function RemoveQueryLine(button)
    {
        for (var i = 0; i < button.current_values.query_control_array.length; ++i) {
            button.current_values.query_control_array[i].remove_button.disable();
        }
        
        var local_current_values = button.current_values.query_control_array[button.current_values.index];
        var local_current_container = button.current_values.query_items_array[button.current_values.index];
        
        button.current_values.query_control_array.splice(local_current_values.index, 1);
        button.current_values.query_items_array.splice(local_current_values.index, 1);
        
        for (var i = 0; i < local_current_values.index; ++i) {
            button.current_values.query_control_array[i].remove_button.enable();
        }
        for (var i = local_current_values.index; i < button.current_values.query_control_array.length; ++i) {
            --button.current_values.query_control_array[i].index;
            button.current_values.query_control_array[i].remove_button.enable();
        }
        
        button.current_values.toolbar.remove(local_current_container);
        
        PopulateToolbar();
    }
    
    
    function CreateRemoveButton(current_values)
    {
        return new Ext.Button({
                         text: 'Remove!'
                       , handler: RemoveQueryLine
                       , current_values: current_values
                   });
    }
    
    
    function GetQuery(values)
    {
        return values.query + ((values.check1 == true) ? ' blah':'')
                            + ((values.check2 == true) ? ' blah blah':'');
    }
    
    
    function CreateQueryHeader()
    {
        var column_container = new Ext.Container({
                                      layout: 'column'
                                    , height: 17
                                    , defaults: {style: 'text-align:center;font-size: 85%;font-weight: bold;'}
                                    , items:[
                                            new Ext.BoxComponent({
                                                  width: 60
                                                , autoEl: {cn: 'Source'}
                                            })
                                          , new Ext.BoxComponent({
                                                  columnWidth: .993
                                                , autoEl: {cn: 'Query Text'}
                                            })
                                          , new Ext.BoxComponent({//querybutton
                                                  width: 60
                                                , autoEl: {cn: ''}
                                            })
                                          , new Ext.BoxComponent({
                                                  width: 60
                                                , autoEl: {cn: 'modifier'}
                                            })
                                          , new Ext.BoxComponent({
                                                  width: 60
                                                , autoEl: {cn: 'modifier'}
                                            })
                                          , new Ext.BoxComponent({
                                                  width: 60
                                                , autoEl: {cn: 'Sessions'}
                                            })
                                          , new Ext.BoxComponent({//color button
                                                  width: 50
                                                , autoEl: {cn: ''}
                                            })
                                          , new Ext.BoxComponent({//remove button
                                                  width: 50
                                                , autoEl: {cn: ''}
                                            })
                                      ]
                               });
                               
        return column_container;
    }
    
    function CreateAddExecuteLine()//setup)
    {
        var add_button = new Ext.Button({
                         text: 'Add Query Line'
                       , handler: AddAndDisplayNewQueryLine
                   });
        var get_data_button = new Ext.Button({
                         text: 'Get Data!'
                       , handler: Search
                   });
        
        var hbox_container = new Ext.Container({
                  layout: 'hbox'
                , height: 28
                , layoutConfig: {
                                      align: 'middle'
                                    , pack: 'start'
                                }
                , items: [
                        new Ext.Container({
                                flex: 1
                              , height: 24
                              , layout: 'column'
                              , items: [
                                    new Ext.BoxComponent({
                                          autoEl: {cn: ''}
                                        , columnWidth: .33
                                    })
                                  , new Ext.Container({
                                          items: [get_data_button]
                                        , layout: 'hbox'
                                        , layoutConfig: {
                                                              align: 'middle'
                                                            , pack: 'center'
                                                        }
                                        , columnWidth: .33
                                    })
                                  , new Ext.Container({
                                          items: [add_button]
                                        , layout: 'hbox'
                                        , layoutConfig: {
                                                              align: 'middle'
                                                            , pack: 'end'
                                                        }
                                        , columnWidth: .33
                                    })
                                  ]
                           })
                    ]
            }); 
    
        return hbox_container;
    }
    
    
    function CreateSmallQuerySelectLine(setup, current_values)
    {
        var text_box = CreateQueryText(current_values);
        var query_selector = CreateQueryButton(setup.query_source_default, text_box);
        
        var source_box = CreateQuerySourceButton(setup, current_values, query_selector);
        
        var check1 = CreateNoInternalCheckbox(current_values);
        var check2 = CreateBotsCheckbox(current_values);
        var check3 = new Ext.form.Checkbox({});
        
        var column_container = new Ext.Container({
                                      layout: 'column'
                                    , height: 24
                                    , flex: 1
                                    , items:[
                                            new Ext.Container({
                                                  width: 60
                                                , height: 24
                                                , items: [source_box]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'center'
                                                                }
                                            })
                                          , new Ext.Container({
                                                  columnWidth: .993
                                                , height: 24
                                                , items: [new Ext.Container({
                                                                  layout: 'column'
                                                                , items:[text_box]
                                                                , flex: 1
                                                            })
                                                         ]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'start'
                                                                }
                                            })//text_box*/
                                          , new Ext.Container({
                                                  width: 60
                                                , height: 24
                                                , items: [query_selector]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'center'
                                                                }
                                            })
                                          , new Ext.Container({
                                                  width: 60
                                                , height: 24
                                                , items: [check1]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'center'
                                                                }
                                            })
                                          , new Ext.Container({
                                                  width: 60
                                                , height: 24
                                                , items: [check2]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'center'
                                                                }
                                            })
                                          , new Ext.Container({
                                                  width: 60
                                                , height: 24
                                                , items: [check3]
                                                , layout: 'hbox'
                                                , layoutConfig: {
                                                                      align: 'middle'
                                                                    , pack: 'center'
                                                                }
                                            })
                                      ]
                               });
                               
        var hbox_container = new Ext.Container({
                  layout: 'hbox'
                , height: 32
                , style: ('background-color: #' + setup.default_color)
                , layoutConfig: {
                                      align: 'middle'
                                    , pack: 'start'
                                }
    //            , margins: '4'
                , items: [column_container]
            }); 
                               
        var color_selector = CreateColorButton(setup, hbox_container, current_values);
        
        column_container.add(new Ext.Container({
                              width: 50
                            , height: 24
                            , items: [color_selector]
                            , layout: 'hbox'
                            , layoutConfig: {
                                                  align: 'middle'
                                                , pack: 'center'
                                            }
                        }));
        
        var remove_button = CreateRemoveButton(current_values);
        
        column_container.add(new Ext.Container({
                              width: 50
                            , height: 24
                            , items: [remove_button]
                            , layout: 'hbox'
                            , layoutConfig: {
                                                  align: 'middle'
                                                , pack: 'center'
                                            }
                        }));
        
        current_values.source = setup.default_source;
        current_values.color = setup.default_color;
        current_values.current_displayed = false;
        current_values.query = '';
        current_values.no_internal = true;
        current_values.no_bots_check = true;
        current_values.sessions = false;
        current_values.raw_data = [];//just blow this away if I change something that requres re-retrieval!
        current_values.GetQuery = GetQuery;
        current_values.ClearData = function() {raw_data = [];};
        current_values.query_items_array = setup.query_items_array;
        current_values.query_control_array = setup.query_control_array;
        current_values.index = setup.index;
        current_values.remove_button = remove_button;
        current_values.toolbar = setup.toolbar;
    
        return hbox_container;
    }
    
    function PopulateToolbar()
    {
        toolbar.removeAll(false);//I'm only redoing the layout, not destroying the elements!
    
        toolbar.setHeight(34 * query_items_array.length + 17 + 45);
        
        toolbar.add(query_header);
        toolbar.add(query_items_array); 
        toolbar.add(query_footer);
        toolbar.doLayout();
    }
    
    function AddQueryLine()
    {
        query_setup.default_color = 0;
        
        exit_loop = false;
        
        while (exit_loop == false) {//find the first unused color
            var i;
            for (i = 0; i < query_control_array.length; ++i) {
                if (query_control_array[i].color == color_choices[query_setup.default_color]) {
                    break;
                }
            }
            if (i == query_control_array.length) {//found color
                exit_loop = true;
                query_setup.default_color = color_choices[query_setup.default_color];
            } else {
                ++query_setup.default_color;
            }
        }
        
        query_setup.index = query_control_array.length;
        query_control_array.push({});
        query_items_array.push(CreateSmallQuerySelectLine(
                query_setup, 
                query_control_array[query_setup.index]));
    }
    
    function AddAndDisplayNewQueryLine()
    {
        AddQueryLine();
        PopulateToolbar();
    }
    
    Ext.onReady(function() {
        Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';
        Ext.Ajax.autoAbort = false;
        
        for (var i = 0; i < 2; ++i) {
            AddQueryLine();
        }
        
        var main_panel = new Ext.Panel({
              border: false
            , layout: 'auto'
            , region: 'center'
            , autoScroll: true
            , items: [new Ext.Container({
                          applyTo: "svg_graph"//this is a large fixed height data viewer
                     })]
            , tbar: toolbar
        });
                    
        var header = new Ext.BoxComponent({
              region: "north"
            , applyTo: "ncbiheader"
        });
        
        view_port = new Ext.Viewport({
              layout: "border"
            , autoHeight: true
            , items: [header, main_panel]
        });
        PopulateToolbar();
        
    });

  2. #2

    Default

    well, I did manage to fix the layout bug by adding a container layer with the header/slector rows and footer as 2 separate items. It seems removeAll + add items back doesn't quite work right...I would still like to know why what I did before didn't work in 3.2.1, but at least my dnamic layout is working again.

Similar Threads

  1. Resizeable Vbox Layout
    By Nesta in forum Ext 3.x: Help & Discussion
    Replies: 21
    Last Post: 23 Aug 2010, 6:39 AM
  2. Toolbar with VBox layout?
    By arthurakay in forum Ext 3.x: Help & Discussion
    Replies: 10
    Last Post: 14 May 2010, 7:14 AM
  3. VBOX Layout Question
    By Bleak in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 20 Apr 2010, 6:53 AM
  4. vbox layout height when dynamically adding items
    By sacha in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 5 Jan 2010, 6:28 AM
  5. [FIXED][3.0RC2] Adding items to vBox layout
    By zombeerose in forum Ext 3.x: Bugs
    Replies: 38
    Last Post: 28 Jul 2009, 4:27 AM

Posting Permissions

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