#list #sencha-touch
#Список #сенча-касание
Вопрос:
следующий код кажется неполным, или я делаю что-то не так? проблема в том, что список не прокручивается вправо.
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', 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', 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', 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: '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,
}]
});
}
});
спасибо, что посмотрели!
редактировать: не прокручивается вправо означает, что при отпускании ручки он возвращается в исходное положение…
Комментарии:
1. Не могли бы вы уточнить, что вы подразумеваете под «не прокручивается вправо»?
2. shure. список ведет себя так, как будто это не список, а обычная панель, скользящая назад, когда вы отпускаете палец / мышь.
3. У меня такая же проблема… Если вы найдете решение, не могли бы вы дать мне знать?
Ответ №1:
Я думаю, проблема в том, что родительский контейнер не сможет определить высоту, которую должен иметь список, потому что есть два дочерних элемента, поэтому ‘fit’ на самом деле не имеет значения. Если вы измените родительский макет с 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,
}]
});
Комментарии:
1. спасибо — я скоро попробую это!
Ответ №2:
Придайте 'padding-bottom' стиль панели, которая окружает две панели.
В моем случае ‘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',
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,
}]
});
}
});