PDA

View Full Version : adding element to vbox snafu's layout



harmomelodic
27 May 2010, 4:05 AM
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.


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...


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();

});

harmomelodic
28 May 2010, 4:00 AM
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.