在使用 Sencha Touch 2.0 时偶然发现了一个问题。我想要在我的 Ext.Container 中显示一个列表,但什么也没发生。
我的类(class) (LoggedInView.js)
Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
layout: 'vbox',
items: [{
xtype: "toolbar",
docked: "top",
title: "Pågående anbud"
},{
xtype: 'list',
itemTpl: '{name}',
flex: 1,
store : 'Auction'
}]
}
});
我的商店 (Auction.js)
Ext.define('GS.store.Auction', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
fields: ['name'],
data: [
{name: 'test1'},
{name: 'test2'},
{name: 'test3'},
{name: 'test4'},
]
},
});
我的应用程序 (app.js)
Ext.application({
name: 'GS',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'LoggedInView'],
stores: ['Auction'],
....etc...
我在这里做错了什么?我正确呈现了工具栏,但列表未显示。
编辑
Alos 附上了我的 (main.js)
// The login button
var button = Ext.create('Ext.Button', {
text: 'Logga in',
minHeight: '45px',
handler: function (b, e) {
var form = Ext.getCmp('register');
form.submit({
url: 'URL HERE',
method: 'POST',
success: function (frm, res) {
var paneltab = Ext.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure: function (frm, res) {
alert('Form no submit!');
}
});
}
});
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
id: 'register',
frame:true,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'userName',
placeHolder : 'Användarnamn'
},
{
xtype: 'passwordfield',
name : 'password',
placeHolder : 'Lösenord'
}
]
},
{
xtype: 'container',
items: [button]
},
]
});
最佳答案
将 fullscreen: true
添加到您的 View 配置
我的类(class) (LoggedInView.js)
Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
layout: 'vbox',
fullscreen: true,
items: [{
xtype: "toolbar",
docked: "top",
title: "Pågående anbud"
},{
xtype: 'list',
itemTpl: '{name}',
flex: 1,
store : 'Auction'
}]
}
});
您在senchafiddle中的代码:http://www.senchafiddle.com/#HcaOD
编辑:
在 Main.js 中,您没有定义主视图,因此无法在 app.js 中创建它
重新设计的 Main.js
Ext.define('GS.view.Main', {
extend : 'Ext.form.Panel',
config : {
fullscreen : true,
id : 'register',
frame : true,
items : [{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'userName',
placeHolder : 'Användarnamn'
}, {
xtype : 'passwordfield',
name : 'password',
placeHolder : 'Lösenord'
}]
}, {
xtype : 'button',
text : 'Logga in',
minHeight : '45px',
handler : function(b, e) {
var form = Ext.getCmp('register');
form.submit({
url : 'http://testurl.com',
method : 'POST',
success : function(frm, res) {
var paneltab = Ext
.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure : function(frm, res) {
alert('Form no submit!');
}
});
}
}]
}
});
另外一个问题是,post方法不起作用,因为它没有提交,所以它会警告“表单没有提交!”。但是,当您将成功代码放入失败函数中时,就会显示该列表。
但是我建议您将按钮处理程序放入 Controller 中。
按钮代码如下所示:
{
xtype : 'button',
text : 'Logga in',
minHeight : '45px',
action: 'submitFormAction'
}
Controller.js
Ext.define('GS.controller.Controller', {
extend : 'Ext.app.Controller',
config : {
control : {
'button[action="submitFormAction"]' : {
tap : 'submitForm'
},
}
},
submitForm : function() {
var form = Ext.getCmp('register');
form.submit({
url : 'http://testurl.com',
method : 'POST',
success : function(frm, res) {
var paneltab = Ext.create('GS.view.LoggedInView');
Ext.getCmp('register').destroy();
Ext.Viewport.add(paneltab);
},
failure : function(frm, res) {
alert('Form no submit!');
}
});
}
});
然后,您必须使用 controllers:['Controller'],
在 app.js 中添加 Controller 。
工作中的senchafiddle:http://www.senchafiddle.com/#HcaOD#pArtn
关于javascript - 即使我添加了布局和弹性属性,列表在 Ext.Container 中也不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14624201/