问题描述
|
以下代码似乎不完整,或者我做错了什么?
问题是列表无法向右滚动。
Ext.ns(\'simfla.ux.plugins.demo\');
Ext.regModel(\'Contact\',{
fields: [\'firstName\',\'lastName\']
});
simfla.ux.plugins.demo.store = new Ext.data.Store({
model: \'Contact\',sorters: \'firstName\',data: [
{firstName: \'Tommy\',lastName: \'Maintz\'},{firstName: \'Ed\',lastName: \'Spencer\'},{firstName: \'Jamie\',lastName: \'Avins\'},{firstName: \'Aaron\',lastName: \'Conran\'},{firstName: \'Dave\',lastName: \'Kaneda\'},{firstName: \'Michael\',lastName: \'Mullany\'},{firstName: \'Abraham\',lastName: \'Elias\'},{firstName: \'Tommy\',{firstName: \'Jay\',lastName: \'Robinson\'}
]
})
Ext.setup({
tabletStartupScreen: \'tablet_startup.png\',phonestartupScreen: \'phone_startup.png\',icon: \'icon.png\',glossOnIcon: false,onReady : function() {
var app = new Ext.Panel({
fullscreen: true,layout: \'fit\',dockedItems:[{
xtype: \'toolbar\',title: \'EditableList Plugin\',}],items: [
{
xtype: \'panel\',title:\'topPanel\',items:{
xtype:\'button\',cls: \'editChildBtn\',text: \'Einstellungen\',width: 150,handler: function(){}
}
},{
xtype: \'list\',style: \'background-color: Transparent;\',id: \'MyList\',allowdeselect: true,clearSelectionOnDeactivate: true,//layout: \'fit\',store: simfla.ux.plugins.demo.store,itemTpl: \'{firstName} <strong>{lastName}</strong>\',grouped: false,indexBar: false,singleSelect: true,}]
});
}
});
感谢thanx!
编辑:不向右滚动表示放开手柄时,它会翻转回到初始位置...
解决方法
我认为问题在于,父容器将无法确定列表应具有的高度,因为有两个子容器,因此“ fit”实际上没有含义。如果您将父项的布局从“适合”更改为vbox,请为“'topPanel \'”设置一个固定的高度,并将列表的flex设置为1,这两个子项应填满屏幕。
var app = new Ext.Panel({
fullscreen: true,layout: {
type: \'vbox\',align: \'stretch\'
},dockedItems:[{
xtype: \'toolbar\',title: \'EditableList Plugin\',}],items: [
{
xtype: \'panel\',title:\'topPanel\',height: 50,items:{
xtype:\'button\',cls: \'editChildBtn\',text: \'Einstellungen\',width: 150,handler: function(){}
}
},{
xtype: \'list\',flex: 1,style: \'background-color: Transparent;\',id: \'MyList\',allowDeselect: true,clearSelectionOnDeactivate: true,//layout: \'fit\',store: simfla.ux.plugins.demo.store,itemTpl: \'{firstName} <strong>{lastName}</strong>\',grouped: false,indexBar: false,singleSelect: true,}]
});
,给包围两个面板的面板设置“ 2”样式。
就我而言,“ 100px”是最好的。
Ext.setup({
tabletStartupScreen: \'tablet_startup.png\',phoneStartupScreen: \'phone_startup.png\',icon: \'icon.png\',glossOnIcon: false,onReady : function() {
var app = new Ext.Panel({
fullscreen: true,layout: \'fit\',style: \'padding-bottom:100px;\',dockedItems:[{
xtype: \'toolbar\',items: [
{
xtype: \'panel\',items:{
xtype:\'button\',handler: function(){}
}
},{
xtype: \'list\',}]
});
}
});