PDA

View Full Version : List overflow to the bottom



mento
26 Sep 2011, 8:14 PM
hi, anyone could help me about this problem?
my app : first state as this screenshoot 28351

after i click the button, it requests to the server and retrieve Jsonp data, then update it to the list.here is the problem, the updated list, overflow to the bottom toolbar.
28352

here is the code :

var App = new Ext.Application({ name : 'SP',
useLoadMask : true,
launch : function() {

var cari= function() {

var katakunci = Ext.getCmp("barang").getValue();
store.getProxy().extraParams.q = katakunci ;
store.read();

}


var searchcontainer = new Ext.Panel({
padding : 10,
layout:{align: 'stretch',type:'hbox'},
items:[
{xtype:'textfield',
ui:'round',
id:'barang',
flex:5
},
{xtype:'spacer',flex:1},
{ xtype:'button',ui: 'action', text: 'Cari',flex:2,
handler: cari //menjalankan function cari()
}

]

});



Ext.regModel('Stok',{
fields:[
{name:'nama', type:'string'},
{name:'kode', type:'string'}]
}
);


var store = new Ext.data.Store({
//autoLoad:true,
model:'Stok',
proxy:{
url:'http://192.168.1.3/2.php',
type:'scripttag',
callbackParams:'callback',
extraParams:{q:'kabel'},
reader: {
root: 'results'
}
}

});

var listhasil= new Ext.List({
ui:'round',
padding:20,
itemTpl:'{nama}' ,
store:store,
});

var listcontainer= new Ext.Panel({
layout:'auto',
align:'stretch',
items:listhasil


});





SP.views.viewport = new Ext.Panel({

type:'vbox',
align:'stretch',
items : [searchcontainer,listcontainer],
//items : [listcontainer],
fullscreen : true,
dockedItems: [{
xtype: 'toolbar',
title: 'Cari',
dock:'top'
},{
xtype: 'toolbar',
title: '--',
dock:'bottom'
}]
});
}

})

mento
27 Sep 2011, 8:31 PM
anyone could help me with that problem?

eviriyanti
9 Feb 2012, 7:04 PM
just replace your setting panel-> type:'vbox', align:'strecth' with layout:'fix'
then put search form and bottom toolbar inner dockedItems. see the code below


SP.views.viewport = new Ext.Panel({
fullscreen: true,
items: listhasil,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
scroll: 'horizontal',
layout: {
pack: 'center'
},
items: [searchcontainer]
},{
id: 'status',
xtype: 'toolbar',
dock: 'bottom',
title: "--"
}]

});



I tested well and it work.