PDA

View Full Version : [CLOSED] ItemSelector in a TabPanel with deferredRender = false



Qtx
14 Jun 2010, 7:45 AM
ExtJS 3.2.0

I have an ItemSelector in a tab of a TabPanel. This tab is not visible per default. I have to set deferredRender = false because my TabPanel is a from and needs to be loaded and saved.

The ItemSelector seems to be rendered wrong in this case. See the example:

- there is no vertical scrollbar although there are invisible items
- the bottom border is not there (it is there if the deferredRender = true)

Create the example file with the code below. Name it hello3.html and place it to 'examples\window\'


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script>
var groups = [

[ '3', 'Registered users' ],
[ '16', '22223' ],
[ '12', '2223332' ],
[ '17', '2233332' ],
[ '13', '32322' ],
[ '15', '33222' ],
[ '18', '333' ],
[ '19', '333222' ],
[ '14', '33332222' ],
[ '20', '44444' ],
[ '21', '55555' ],
[ '11', '5565656' ],
[ '22', '7776656' ],
[ '23', '7777' ],
[ '28', '999999' ],
[ '31', '9994444444999' ],
[ '24', '888' ],
[ '5', 'Dealers' ],
[ '6', 'Managers' ],
[ '4', 'Partners' ]];

function show_properties()
{
var restriction_selector = new Ext.ux.form.ItemSelector({
xtype: 'itemselector',
name: 'groups',
imagePath: '../ux/images/',
width: 580,

drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,

multiselects: [
{
width: 280,
height: 220,
draggable: false,
droppable: false,
style: 'background-color: white',
store: groups,
displayField: 'text',
valueField: 'value'
},{
width: 280,
height: 220,
draggable: false,
droppable: false,
style: 'background-color: white',
store: new Ext.data.ArrayStore({ data: [], fields: ['value','text'] }),
displayField: 'text',
valueField: 'value'
}
]
});

properties_form = new Ext.FormPanel({
border: false,
layout: 'fit',
trackResetOnLoad: true,

items: current_tab_control = new Ext.TabPanel({
activeTab: 0,
width: 600,
height: 250,
plain: false,
border: false,
enableTabScroll:true,
animScroll: false,
deferredRender: false,
defaults:{autoScroll: true},
items:[
{
id: 'properties_common',
title: 'Common properties',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
items: [
{
frame: true,
collapsible: false,
layout:'form',
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
width: 600,

defaults: { anchor: '0' },
labelWidth: 168,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Internal name*',
id: 'object_iname',
name: 'object_iname'
},
new Ext.form.DateField({
fieldLabel: 'Expiration date',
qtip: 'date format: 2007-02-28',
format: 'Y-m-d',
id: 'expire_date',
name: 'expire_date'
})
]
}
]
},
{
id: 'properties_restrictions',
title: 'Access restrictions',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
items: [
{
frame: true,
collapsible: false,
layout:'form',
style: 'margin: 5px 5px 5px 5px',
width: 592,

hideLabels: true,
items: restriction_selector
}
]
}
]
})
});

properties_window = new Ext.Window({

title: 'Object',

width: 700,
height: 494,

closeAction: 'close',
plain: true,
modal: true,

//maximized: true,
maximizable: false,
minimizable: false,
resizable: false,

layout: 'fit',
items: properties_form,

buttons: [
{
text: 'Close',
icon: 'images/icons/close.png',
handler: function(){ properties_window.close(); }
}
]
});

properties_window.show();
} // show_properties
//-------------------------------------------------------------------------

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
show_properties();
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<input type="button" id="show-btn" value="Show Window" />

</body>
</html>

Jamie Avins
14 Jun 2010, 8:54 AM
Have you tried layoutOnTabChange: true? Since you are rendering to a hidden panel, you will need to layout again when it is shown.

Qtx
14 Jun 2010, 12:10 PM
layoutOnTabChange has helped. Thank you. Then, it is not a bug. Maybe, it makes sense to move the topic to the Ext:Help

ilevina
23 Jul 2010, 3:23 PM
Hi Jamie,

I am having similar issue with card layout, panel with ItemSelector is not active by default, I am using radioGroup to switch beetween two panels in card layout. I tried to use layoutOnCardChange=true it doesn't help. It kind works in IE but rendered wrong and not showing in FireFox.

If I switch order of active panels panel with ItemSelector will look OK, however I need it to be not shown by default.

Any idea what else I could try to fix it?

Irene

Condor
25 Jul 2010, 4:43 AM
Did you make the hidden card hideMode:'offsets'?

ilevina
25 Jul 2010, 4:33 PM
Thanks, it is work :)

Irene

dalder
8 Jun 2011, 3:43 AM
layoutOnTabChange and hideMode weren't working in my application.

setting a with to itemselector solved the problem in my case:


xtype: 'itemselector',
width: 550,
...
multiselects: [{
width: 250,
...
},{
width: 250,
...
}]