View Full Version : Toolbar with Searchfield in 3.0 not rendered

20 Jul 2009, 4:33 AM

I set up a tabPanel with several Ext.Panels. Two of this Panels look like this:

var panel_zitate = new Ext.Panel({
items: zitatDataView,
tbar: [
'Suchen: ', ' ',
new Ext.ux.form.SearchField({
store: zitate_store,
}); // end of new Ext.Panel

The SearchField in the Toolbar of this panel is not rendered. Only the empty Toolbar is visble.

Iīve read, that this error occurs if the panel isnt visible while doing the layout (if this panel is the first panel in my tabView, the SearchField is visible).

How can I fix this problem, the panel must not be the first panel of my Tabs.....



5 Aug 2009, 5:50 AM
Well, who owns Ext.ux.form.SearchField?

5 Aug 2009, 5:51 AM
Also, what browser(s)?? Try specifying a width explicitly.

10 Aug 2009, 4:23 AM
Hi, I've the same problem with ext 3. FF3.0.13. My tbar owns grid which owns border layout container which is xtype.

}, '-', new Ext.app.SearchField({
store: prefixStore,
params: {start: 0, limit: 50},
width: 120

10 Aug 2009, 5:30 AM
Ext 3.0 doesn't have an Ext.app.SearchField component, so I think you are using an Ext 2.x component.

In Ext 3.0 the component is called Ext.ux.form.SearchField (in examples/ux/SearchField.js).

10 Aug 2009, 5:39 AM
You are right. I've checked the new ux component but it is exactly same as I've used. The problem is that width of that component is 0. I've tried to register searchfield as xtype, no luck.

<div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen97" style="overflow: hidden; width: 0px;"><input type="text" name="ext-comp-1047" id="ext-comp-1047" autocomplete="off" size="16" class="x-form-text x-form-field" style="width: 100px;"/><span class="x-form-twin-triggers" id="ext-gen98"><img class="x-form-trigger x-form-clear-trigger" src="./ext/resources/images/default/s.gif" id="ext-gen99" style="display: none;"/><img class="x-form-trigger x-form-search-trigger" src="./ext/resources/images/default/s.gif" id="ext-gen100"/></span></div>Layout is this: viewport -> center -> border layout -> center -> grid -> tbar -> searchfield.

I'm using xtypes as much as possible. border layout is xtype.

10 Aug 2009, 5:42 AM
SearchField is based on TwinTriggerField, which (just like TriggerField) has problems with being rendered into a container which is hidden with display:none.

But I can't tell you what is causing this when I can't see the entire viewport layout.

10 Aug 2009, 6:15 AM
I've copy/paste fragments from my code, is it what you want to see?

mviewport = new Ext.Viewport({
layout: 'border',
title: 'Zirkon PBX',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
layout: 'border',
id: 'layout-browser',
border: false,
margins: '2 0 5 5',
width: 190,
minSize: 100,
maxSize: 500,
items: [treePanel, detailsPanel]
//to this panel I'm rendering layouts
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
deferredRender: true,
items: [
id: 'start-panel',
title: 'Start Page',
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'start-div' // pull existing content from the page
renderTo: Ext.getBody()

prefixGrid = Ext.extend(Ext.grid.GridPanel, {
Ext.apply(this, {
title: 'Billing',
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
items: [{
collapsible: false,
floatable: false,
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250,
layout: 'fit',
items: {xtype:'BillingTableX'}
collapsible: false,
margins: '5 0 0 0',
layout: 'fit',
items: {xtype: 'BillingTableRulesX'}
}); //eo apply
// ------ tcut ----------------

// Here I'm adding nested panel

// xtype BillingTableSulesX contains grid with tbar with searchfield

10 Aug 2009, 6:18 AM
Your deferredRender config option isn't working.

In a card layout you need to specify it as:

layoutConfig: {deferredRender: true}

ps. Aren't you forgetting to use:


10 Aug 2009, 6:23 AM
Nice catch! It works. I think that it is the same problem with the first post. Many thanks for quick help.

p.s.: setActiveItem - I've forgotten to paste it, it was not issue

2 Sep 2009, 6:50 AM

i included

layoutConfig: {deferredRender: true}into createwindow and it still doesn't work.

Interestingly it works with or without with IE8, but not with firefox 3.5.2.

i got the desktop example and i'm creating a window, in this window there's a grid, and this grid got the searchfield in tbar.

any ideas?!


2 Sep 2009, 7:10 AM
I'm expiriences some render issues with desktop applications too (normal windows works). There is probably some missing "layout actions" wihtin desktop application.

5 Nov 2009, 9:16 AM
I have almost the same problem. This panel is rendered into a div-element
which is set to display:none at the beginning. Later if I set it to display:block
there is no Ext.ux.form.SearchField rendered (Firefox only).

Anyone out there who can help me? ;)

Thanks in advance ...

// Custom Grid Panel
new Ext.Panel({
applyTo: 'search-panel-' + facet,
title: title,
autoScroll: true,

items: dataView,

tbar: [
'Search: ', ' ',
new Ext.ux.form.SearchField({
store: ds,
emptyText: 'Type in here...',
searchField: searchField

bbar: new Ext.PagingToolbar({
store: ds,
pageSize: limit,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: ''


5 Nov 2009, 10:14 AM
In Firebug I can see that the enclosing div (rendered by ExtJS) is set to width=0 ... :-?

5 Nov 2009, 10:09 PM
I guess itīs a bug because itīs working in IE ...?

9 Nov 2009, 3:33 AM
BTW: The non-working searchField is of type Ext.form.TwinTriggerField ... Ext.form.TriggerField works perfectly