我试图在同一个视图中制作两个列表，我在两个弹性框中分隔视图，其中包括每个列表，但它不能正常工作..这个实现或建议的任何线索？我正在使用Sencha Touch 2.3.1框架。
提前致谢。
/**
* The home view
*/
Ext.define('xx.view.home.BlocksHome', {
extend : 'Ext.Container',
xtype : 'blocksHome',
requires: [
'Ext.TitleBar',
'Ext.dataview.List',
'xx.view.news.News'
],
config : {
items: [
// selection container
{
xtype : 'container',
cls : 'home-container',
flex : 2,
layout : {
type : 'hbox',
align: 'stretch'
},
defaults: {
xtype : 'container',
styleHtmlContent: true,
flex : 1
},
items : [
// Data Collection
{
cls : 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [
{
cls : 'news-collection-header',
layout: 'hbox',
items: [
{
html: '<h4>' + xx.Text.getText('NEWS') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text : xx.Text.getText('NEWS'),
flex: 1
},
{
xtype: 'news',
layout: 'card'
}
]
}
]
},
// Customers
{
cls : 'open-activities',
layout: 'vbox',
items: [
{
cls : 'open-activities-header',
layout: 'hbox',
items : [
{
html: '<h4>' + xx.getText('ACTIVITY_LIST_TITLE') +'</h4>',
flex: 2
},
{
xtype : 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text : xx.Text.getText('ACTIVITY_LIST_TITLE'),
flex: 1
}
]
}
]
}
]
}
]
}
});
此处视图包含名为＆＃34; news＆＃34;
的卡片布局Ext.define('xx.view.news.List', {
extend: 'Ext.dataview.List',
xtype: 'news',
requires: [
'Ext.TitleBar',
'Ext.plugin.PullRefresh'
],
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
listeners: {
painted: function(element) {
if (Ext.browser.is.IE) {
// position pull to refresh centered
Ext.get(element.query('.x-list-pullrefresh')[0]).setStyle('left', (Ext.getBody().getWidth() / 2) - 132 + 'px');
}
}
}
}
],
store: 'News',
itemTpl: '<div class="newslistline">' +
' <div class="newssubject"><tpl if="unread == \'true\'"><span style class="newsNew">new</span></tpl>{subject}</div>' +
' <div class="newsupdatedate">{[xx.Helper.formatSAPdate2Str(values.updatedate)]}</div>' +
' <div class="newsupdateby">{responsible}</div>' +
' <div class="newsattachment {[values.attflag == \'true\'? \'attachment\' : \' \']}">' +
' </div>' +
' </div>',
emptyText: xx.Text.getText('NEWS_LIST_EMPTY'),
loadingText: xx.Text.getText('NEWS_LIST_LOADING'),
items: [
{
docked: 'top',
xtype: 'titlebar',
title: xx.Text.getText('NEWS_LIST_TITLE')
}
]
}
});
答案 0 :(得分：0)
将flex:1添加到每个列表中。这是我使用Sencha Fiddle创建的一个工作示例。
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('News', {
extend: 'Ext.data.Model',
config: {
fields: ['subject']
}
});
var store1 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Item1'
}, {
subject: 'Item2'
}]
});
var store2 = Ext.create('Ext.data.Store', {
model: 'News',
data: [{
subject: 'Record1'
}, {
subject: 'Record2'
}]
});
Ext.define('xx.view.news.List', {
extend: 'Ext.List',
xtype: 'news',
requires: ['Ext.TitleBar'],
emptyText: 'Empty',
loadingText: 'Loading',
config: {
itemTpl: '<div class="newslistline">{subject}</div>'
}
});
Ext.create("Ext.Container", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
xtype: 'container',
cls: 'home-container',
flex: 2,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
styleHtmlContent: true,
flex: 1
},
items: [{
cls: 'news-container',
iconCls: 'inbox',
height: 800,
layout: 'vbox',
items: [{
cls: 'news-collection-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2
}, {
xtype: 'button',
itemId: 'toNewsCollection',
iconCls: 'inbox',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store1
}]
}, {
cls: 'open-activities',
layout: 'vbox',
items: [{
cls: 'open-activities-header',
layout: 'hbox',
items: [{
html: '<h4>Title</h4>',
flex: 2,
itemTpl: '<div class="newslistline">{subject}</div>'
}, {
xtype: 'button',
itemId: 'toActivitiesCollection',
iconCls: 'check2',
text: 'Something',
flex: 1
}]
}, {
xtype: 'news',
flex: 1,
store: store2
}]
}]
}]
});
}
});