PDA

View Full Version : Possible ComboBox Bug? : Browser resize after combo result rendered.



j11extjs
3 Nov 2010, 8:38 PM
I have a combo inside a panel with an 'anchor' layout. Initially, the panel and everything inside it resizes fine when the browser is resized. When I click a button within this panel a result is rendered by the combo box using a tpl. Whatever the size of this combo box just before the search result is rendered in it becomes the minimum size the combo box will resize to with the browser. Therefore increasing the width of the browser from hereon is fine but decreasing the browser width only proportionally decreases the panel up to this minimum width.

PS. I am using fitToParent as a plugin to the panel containing the combo but I don't think it is causing the sizing issue.
I can post my code if it will help you help me.

Thank you in advance.

Condor
3 Nov 2010, 11:59 PM
Yes, you'll probably have to post your code.

j11extjs
4 Nov 2010, 1:19 AM
Here it is:

This is the main panel:

var fitToParentSearch = new Ext.ux.FitToParent("docSearchDiv");
var searchForm = new Ext.Panel({
title: 'Document Search',
height : 80,
border : false,
id : 'docSearchPanel',
plugins: [fitToParentSearch],
layout : 'anchor',
renderTo: 'docSearchDiv',
items : [
{
xtype: 'panel',
border : false,
height: 10
},
contentPanel
]
});


This is contenPanel:

var contentPanel = {
xtype: 'panel',
id: 'ContentPanel',
layout:'column',
border : false,
height: 50,
items: [
{
layout:'form',
height: 50,
border:false,
xtype:'panel',
bodyStyle:'padding:0 18px 0 0',
id: 'Panel1',
columnWidth: .9,
defaults:{anchor:'100%'},
items: comboSearch
},
{
layout:'column',
height: 50,
border:false,
xtype:'panel',
//bodyStyle:'padding:0 18px 0 0'
id: 'Panel2',
width: 270,
defaults:{border: false},
items: [
{
width: 20
},{
id: 'PanelSearch',
columnWidth: .5,
items: [
{
xtype: 'button',
width: 100,
id: 'btnSearch',
text: 'Search',
handler: onSearch
}
]
},{
width: 10
},{
id: 'PanelAdd',
columnWidth: .5,
items: [
{
xtype: 'button',
width: 100,
id: 'btnAdd',
text: 'Add Document',
handler: onAddDocument
}
]
}
]
}
]
}

This is the combo box xtype declaration:

var comboSearch = {
xtype:'combo',
id: 'fldSearchCriteriaCbo',
fieldLabel:'Search Criteria',
store: docStoreSearch,
mode: 'local',
typeAhead: false,
hideTrigger: true,
loadingText: 'Searching...',
resizable: true,
pageSize:5,
tpl: resultTpl,
itemSelector: 'div.search-item',
enableKeyEvents: true
}

And finally the resultTpl template for the combo box. There are 10 columns for 10 fields, but I shorted the code below:

var resultTpl = new Ext.XTemplate(
'<tpl>',
'<DIV class="x-grid3-header">',
' <DIV class="x-grid3-header-inner">',
' <DIV class="x-grid3-header-offset" style="WIDTH: 100%">',
'<TABLE style="WIDTH: 100%" cellSpacing="0" cellPadding="0" border="0">',
'<THEAD>',
' <TR class="x-grid3-hd-row">',
' <TD class="x-grid3-hd x-grid3-cell">',
' <DIV class="x-grid3-hd-inner" unselectable="on" style="overflow: hidden; WIDTH: 100px !important">',
' <A class="x-grid3-hd-btn" style="HEIGHT: 22px" ></A>Header 1<IMG class="x-grid3-sort-icon" />',
' </DIV>',
' </TD>',
' <TD class="x-grid3-hd x-grid3-cell">',
' <DIV class="x-grid3-hd-inner" unselectable="on" style="overflow: hidden; WIDTH: 100px !important">',
' <A class="x-grid3-hd-btn" ></A>Header N<IMG class="x-grid3-sort-icon" />',
' </DIV>',
' </TD>',
' <TD class="x-grid3-hd x-grid3-cell">',
' <DIV class="x-grid3-hd-inner" unselectable="on" style="overflow: hidden; WIDTH: 100px !important">',
' <A class="x-grid3-hd-btn" ></A>Header 10<IMG class="x-grid3-sort-icon" />',
' </DIV>',
' </TD>',
' </TR>',
'</THEAD>',
'<TBODY></TBODY>',
'</TABLE>',
' </DIV>',
' </DIV>',
' <DIV class="x-clear"></DIV>',
'</DIV>',
'</tpl>',
' <DIV class="x-grid3-scroller" style="OVERFLOW-X: hidden">',
' <DIV class="x-grid3-body" style="WIDTH: 100%"> ',
'<tpl for="."><div class="search-item">',
'<DIV class="x-grid3-row " style="WIDTH: 100%" rowIndex="2">',
' <TABLE class="x-grid3-row-table" style="WIDTH: 100%" cellSpacing="0" cellPadding="0" border="0">',
' <TBODY>',
' <TR>',
' <TD class="x-grid3-col x-grid3-cell">',
' <DIV class="x-grid3-cell-inner" unselectable="on" style="WIDTH: 100px; overflow: hidden !important;">{Field1}</DIV>',
' </TD>',
' <TD class="x-grid3-col x-grid3-cell">',
' <DIV class="x-grid3-cell-inner" unselectable="on" style="WIDTH: 100px; overflow: hidden !important;">{FieldN}</DIV>',
' </TD>',
' <TD class="x-grid3-col x-grid3-cell">',
' <DIV class="x-grid3-cell-inner" unselectable="on" style="WIDTH: 100px; overflow: hidden !important;">{Field10}</DIV>',
' </TD>',
' </TR>',
' </TBODY>',
' </TABLE>',
'</DIV>',
' </div></tpl>'
);

j11extjs
4 Nov 2010, 1:22 AM
Also, I found that when
resizable: true, the result template stops resizing with the browser once it has been resized the first time (using the bottom-right anchor for resizing). Initially however, it would resize with the browser.

Just a note, the empty panels within the main and the contentPanel are for setting a fixed space between the controls when the browser is resized. My first attempt has the space between the buttons for example, shrinks with the browser width.