PDA

View Full Version : Indexbar rendering outside the screen.



blessan
28 Sep 2010, 11:27 PM
I have put up a small demo which basically consist of a panel with a textfield on the top and a list below it. The list and everything renders ok. But the thing is when I set indexBar:true, index bar is getting displayed. Later when I checked the dom in the chrome toolbar. I found the indexbar div. It happens to be positioned outside the screen. When I edited the left value, the indexbar was visible. How can I correct this.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('questionModel', {
fields: [
{name: 'value',type: 'string'},
{name: 'title',type: 'string'}
]
});

var book_monthobj=new Object();
var book_monthdata = [];
for (var i=1; i<=12; i++) {
book_monthobj[i] = new Object();
book_monthobj[i].title = (i==1) ? i+' Month' : i+' Months' ;
book_monthobj[i].value = i;
book_monthdata.push(book_monthobj[i]);
};

var book_monthStore = new Ext.data.JsonStore({
data :book_monthdata,
model : 'questionModel',
autoLoad : true,
sorters:'title',
getGroupString : function(record) {
return record.get('title')[0];
}
});

panel = new Ext.Panel({

layout:'card',
fullscreen: true,
scroll:'vertical',
items:[
{
xtype:'panel',
items:[
{
xtype:'textfield',
name:'sdf',
label:'Test'
},
{
xtype:'list',
grouped:true,

indexBar:true,
store:book_monthStore,
tpl: '<tpl for=".">'+
'<div class="next" style="padding:5px;background-position:97% 50% !important;">{title}</div>'+
'</tpl>',
itemSelector: 'div.next',
singleSelect: true,
scroll:false
}
]
}
]
});
}
});

evant
29 Sep 2010, 12:03 AM
You've got 2 unsized items in a panel with no layout.

Give the panel a layout vbox with align stretch. Then give the list a flex 1 and the textfield a height.

blessan
29 Sep 2010, 12:55 AM
Thanks it works now. Im not really good with the layouts. Is there a link for the layout. Like different kinds of align. What is flex? I could not find that in the documentation.