PDA

View Full Version : [2.0.2][SOLVED] Form Panel inside Tab Panel



webik
7 Apr 2008, 10:37 AM
Hi

I've got problem, or bug.

My form:

var user = new Ext.form.FormPanel({
width:950,
autoHeight:true,
labelWidth:120,
labelAlign:'right',
monitorValid:true,
title:'Moje dane',
waitMsgTarget:true,
frame:true,
header:true,
items:[{
title:'Osoba',
bodyStyle:'padding:5px 5px 0',
items:[{layout:'column',
items:[{
columnWidth:0.5,
labelWidth:100,
defaults:{
width:325
},
layout:'form',
items:[
Id, IdEMail, IdTelKont, IdTelFirmy, IdFunkcji, IdFaxFirmy,
idStatusu,IdAdres, IdKontrahenta, Login, Imie, Nazwisko,
EMail, TelKont]
}, {
columnWidth:0.5,
labelWidth:100,
defaults:{
width:325
},
layout:'form',
items:[Funkcja, Status, DataWpisu, Newsletter, Powiadomienie]
}]
}]
}, {
title:'Firma',
bodyStyle:'padding:5px 5px 0',
items:[{
layout:'column',
items:[{
columnWidth:0.5,
labelWidth:100,
defaults:{
width:325
},
layout:'form',
items:[
Kontrahent,
{
width:440,
layout:'column',
items:[{
columnWidth:0.9,
layout:'form',
autoWidth:true,
labelWidth:100,
defaults:{
width:195,
style:'margin-right:25px;'
},
items:[TelFirmy]
}, {
columnWidth:0.1,
layout:'form',
labelWidth:30,
autoWidth:true,
defaults:{
width:70
},
items:[TelWewFirmy]
}]
},
FaxFirmy, IdDzialu]
}, {
columnWidth:0.5,
labelWidth:100,
defaults:{
width:325
},
layout:'form',
items:[AdresFirmy, MiastoFirmy, KodPocztowyFirmy, IdStanowiska]
}]
}]
}, tabs],
tbar:[aSave],
reader:reader
});
(all variables are objects correctly setup)

If I put it on my page alone - all looks ok and behave ok(as on ok_no_tabs.jpg file), but if I put this form into tab panel - under first tab:


var data = new Ext.TabPanel({
activeTab:0,
deferredRender:false,
resizeTabs:true,
minTabWidth:110,
tabWidth:110,
autoHeight:true,
autoWidth:true,
applyTo:Ext.get('data'),
items:[{
title:'Profil',
autoHeight:true,
items:[user],
labelWidth:100
}]
});

some parts broken (see second attached file - bad_with_tabs.jpg)
combobox lists are unnatural smaller some fields are placed diffrent error flags on right side aren't correctly show auto loaded part in first tab doesn't apear - I can see it after I switch on other tab and back on first (in firebug console i see that this content is loaded at begining but invisble).




I mention that all this behaviors are correct without tabs.

In my opinon problem is linked with rendring. I spend a lot of time on it. Could you look at it.

TIA

Marcin

Errare humanum est...

devnull
7 Apr 2008, 1:46 PM
I realize this is more of a bug and probably not always easy to search on, but a search for 'form' and 'tabPanel' should bring up several posts that all say to use layoutOnTabChange: true

7 Apr 2008, 1:51 PM
to add to devnull's advice, use google to search extjs.com

site:extjs.com what you are looking for.

webik
8 Apr 2008, 1:45 AM
Hi

I use google every day, and I know how to search. Probably my mistake is that I should use http://www.google.com/webhp?hl=sw becouse I form Poland >:) or mayby I should present in attached files my search results to prove my searching skills.

Ok, but point is, this option change only loading tabs correctly and layers are correctly rendred(my bug bad spelling of this option :">), but problem with "short" combobox lists is still unsolved and this is main problem.

Any suggestions??? If it is on this forum or on google.com please provide me query becouse I'm 2 years old child....

webik

Errare humanum est

dj
8 Apr 2008, 2:04 AM
webik,

try to remove the applyTo of your TabPanel's config and let it render on it's own. can be CSS issue or missing markup.

webik
8 Apr 2008, 2:49 AM
dj

I don't know what you mean render on it's own but I try to put this form into page with oly body markup and div markup with id="data", and remove applyTo option. After that I add data.render('data'); on my script end but no changes the same situation.

What I do wrong???

dj
8 Apr 2008, 3:40 AM
applyTo is only used, when you already have the exact HTML markup that Ext would create. One normally don't use this option, because Ext knows best what it needs.

renderTo is the config option that is normally used. That specifiys the container in which Ext should put its HTML markup. (renderTo:'data' is equivialent to the data.render('data') call)


My guess is, that you have some conflicting CSS rules in place somewhere. You can check, what CSS rules apply for a special element with Firebug. Check the rules for the Combobox if it is rendered inside the TabPanel and if it is rendered outside.

webik
8 Apr 2008, 4:39 AM
Hi

This Part of code (line 26792 ext-all-debug.js)


var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
console.log(this.wrap.getWidth());

Console statment added by me, returns different values to my to examples. When I put Form Panel in Tab Panel listed value is 0 (IMHO wrong), in without Tab Panel case it list 325 value (correct to my code). I'm not expert on Extjs source so I don't know how to correct it. Or it's normal behaviour.

So If I set listWidth to 325 works fine, but arrow image is out of field.

dj
8 Apr 2008, 5:26 AM
Seams that Ext.form.ComboBox.initList is called too early. (in a stage where the dimension of the wrap element cannot be determined)

ensure that all the items, you add to the form, are not rendered, before you add them. And ensure that lazyInit:true (is the default) is set in all ComboBox elements.

webik
8 Apr 2008, 6:24 AM
dj

I bulid each element like that:


var IdDzialu = new Ext.form.ComboBox ({
allowBlank:false,
valueField:'Id',
displayField:'Nazwa',
typeAhead:true,
selectOnFocus:true,
triggerAction:'all',
mode:'local',
editable:false,
fieldLabel:'Dział',
width:325,
lazyInit:true,
hiddenName:'IdDzialu',
store:new Ext.data.Store({
autoLoad:true,
proxy: new Ext.data.HttpProxy({url: 'url', method:'get' }),
reader:new Ext.data.JsonReader({
root:'data'
},[{ name: 'Id', mapping: 'Id'}, { name: 'Nazwa', mapping: 'Nazwa'}])
},['Id', 'Nazwa'])
});

This is one of Comboboxe's. It could be something wrong with that???

dj
8 Apr 2008, 6:31 AM
nothing that i see.

try to fix it "bruteforce" and add a show-listener to the combos


listeners:{
show:function(){
this.setWidth(this.getWidth());
}
}

webik
8 Apr 2008, 6:49 AM
dj

It doesn't work, Only add listWidth 325 it resize list but buton to expand combo is still display wrong (out of field)

I've got no idea :/

dj
8 Apr 2008, 7:27 AM
my ideas are also nearly depleted.

one last one: add a delay to the listener.


listeners:{
show:{
fn:function(){
this.setWidth(this.getWidth());
},
delay:50
}
}

webik
23 May 2008, 1:16 AM
Hi everyone

I found cause of my problems. I put all scripts (with component configs also) in head rpat of page. Now I move it to body tag, and all works properly.

I think, It could be more common problem, so I hope that this post help someone.

best regards

webik