PDA

View Full Version : [OPEN-805] ItemSelector not rendered tabpanel when tabpanel.deferredRender=false



gholyoak
30 Mar 2010, 1:06 AM
Ext version tested:

Ext 3.1.1
Adapter used:

ext
css used:

only default ext-all.css


Browser versions tested against:

IE8
FF3.6 (firebug 1.5.3 installed)
Operating System:

WinXP Pro
Description:

ItemSelector does not display on a form tab when tabpanel.deferredRender=false. It displays fine when tabpanel.deferredRender=true but values not submitted by form it tab isn't activated.
Test Case:



Ext.onReady(function(){
Ext.QuickTips.init();
var SERVER_ROOT='/someprocessor.php';

var win = new Ext.Window({
bodyBorder:false,
bodyStyle:'padding: 1px 1px 1px 1px;',
border:false,
closeAction:'close',
closeable:true,
collapsible:false,
constrain:false,
height:375,
hideBorders:true,
iconCls:'ux-btn-window',
id:'win_ui.extjs.tools.acl.profile',
items:[
new Ext.form.FormPanel({
doSubmit:function(ignoreValidation){
var params={};
params.clientValidation=(ignoreValidation?false:true);
this.getForm().doAction('submit',params);
},
autoHeight:true,
autoScroll:false,
autoWidth:true,
baseParams:{_formpage:1},
bodyStyle:'padding: 5px 5px 5px 5px;',
border:true,
buttonAlign:'right',
buttons:[
{
buttonid:'_w77',handler:function(b,e){ Ext.getCmp('ui.extjs.tools.acl.profile').quit();},processor:'ui.modules.system.acl.profiles',text:'Cancel',tooltip:{title:'Cancel',text:''},xtype:'button'
},
{
buttonid:'_w78',disabled:true,formBind:true,handler:function(b,e){Ext.getCmp('ui.extjs.tools.acl.profile').doSubmit();},processor:'ui.modules.system.acl.profiles',text:'Save',tooltip:{title:'Save',text:''},xtype:'button'
}
],
closable:true,
collapsible:false,
defaults:{validateOnBlur:false,allowBlank:false,msgTarget:'side'},
forceLayout:true,
frame:true,
id:'ui.extjs.tools.acl.profile',
isCacheExt:true,
isFormPanel:true,
items:[
{
activeTab:0,
autoDestroy:true,
autoScroll:false,
border:true,
closable:false,
collapsible:false,
defaults:{autoHeight:true,bodyStyle:'padding:5px'},

deferredRender:true,

enableTabScroll:false,
forceLayout:true,
frame:false,
header:true,
height:282,
id:'_w74',
isCacheExt:true,
isFormPanel:false,
items:[
{
autoHeight:true,
autoScroll:false,
border:false,
closable:false,
collapsible:false,
forceLayout:true,
frame:false,
id:'_w75',
isCacheExt:true,
isFormPanel:true,
items:[
{
allowBlank:true,
fieldLabel:'Name',
isFormField:true,
maxLength:50,
name:'name',
readOnly:false,
value:'Test',
width:250,
xtype:'textfield'
},
{
allowBlank:true,
fieldLabel:'Description',
height:175,
isFormField:true,
maxLength:256,
name:'description',
readOnly:false,
value:'Test new profile',
width:300,
xtype:'textarea'
},
{
allowBlank:true,
checked:false,
fieldLabel:'Issystem',
isFormField:true,
name:'issystem',
readOnly:false,
width:30,
xtype:'checkbox'
}
],
layout:'form',
myLoaded:true,
padding:5,
processor:'ui.modules.system.acl.profiles',
title:'Identification',
tooltip:'Identification',
xtype:'panel'
},
{
autoHeight:true,
autoScroll:false,
border:false,
closable:false,
collapsible:false,
forceLayout:true,
frame:false,
id:'_w76',
isCacheExt:true,
isFormPanel:true,
items:[
{
xtype:'itemselector',
name:'users',
fieldLabel:'Users',
imagePath:'../apps/resources/images',
multiselects:[
{
width:150,
height:150,
store:new Ext.data.ArrayStore({
fields:['id','username'],
sortInfo:{field:'username',direction:'ASC'},
data:[['1','fred']]
}),
displayField:'username',
valueField:'id'
},
{
width:150,
height:150,
store:new Ext.data.ArrayStore({
fields:['id','username'],
sortInfo:{field:'username',direction:'ASC'},
data:[['5','gary'],['6','stuart']]
}),
displayField:'username',
valueField:'id'
}
]
}
],
layout:'form',
myLoaded:true,
padding:5,
processor:'ui.modules.system.acl.profiles',
title:'Users',
tooltip:'Users',
xtype:'panel'
}
],
layoutOnTabChange:true,
minTabWidth:50,
myLoaded:true,
padding:0,
plain:true,
plugins:new Ext.ux.TabCloseMenu(),
processor:'ui.modules.system.acl.profiles',
resizeTabs:false,
xtype:'tabpanel'
}
],
labelAlign:'right',
layout:'fit',
method:'post',
monitorValid:true,
myLoaded:true,
oid:24,
padding:0,
plain:true,
processor:'ui.modules.system.acl.profiles',
readonly:false,
singleUse:false,
uiclass:'ui.extjs.tools.acl.profile',
url:SERVER_ROOT (http://www.extjs.com/forum/SERVER_ROOT),
xtype:'form',
baseParams:{_processor:'ui.modules.system.acl.profiles',_oid:'24',_widget:'form',_object:'ui.extjs.tools.acl.profile',_event:'load',_widgetid:'ui.extjs.tools.acl.profile',_singleUse:'0',_formpage:'1'}
})
],
layout:'fit',
maximizable:true,
minHeight:100,
minWidth:100,
minimizable:true,
modal:false,
plain:false,
processor:'ui.modules.system.acl.profiles',
style:{marginLeft:'0px'},
title:'Test',
width:600,
xtype:'window'
});


win.show();

});




Steps to reproduce the problem:

toggle tabpanel.deferredRender and view form submission
The result that was expected:

ItemSelector displayed and values submitted.
The result that occurs instead:

tabpanel.deferredRender=false - values submitted but ItemSelector not rendered
tabpanel.deferredRender=true - values not submitted if tab not activated


Debugging already done:

none
Possible fix:

?

mschwartz
30 Mar 2010, 5:54 AM
I encountered this yesterday.

The workaround is to set a width for the itemselector proper.



xtype:'itemselector',
width: 350,
name:'users',
fieldLabel:'Users',
imagePath:'../apps/resources/images',
multiselects:[
{
width:150,
height:150,


350 should be enough for your 2x 150-wide multiselects and the buttons in between.

gholyoak
30 Mar 2010, 12:13 PM
Hi m,

Many thanks for your prompt reply.

I've added the overall width as suggested and it works a treat.

Excellent !

MegaDrive
23 Jul 2010, 6:19 AM
Perfectly fits to my needs.

Thanks a lot