我正在开发一个应用程序,当点击表单中的提交按钮时,它应该会转到另一个屏幕。然而,它只是在窗口外打印结果,而不是真正进入新屏幕。我已经对商店进行了硬编码,以确保在启动应用程序时有数据,并且它仍然在可视区域之外打印数据。
这是我的外部数据存储:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
以下是我正在使用的列表:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
我从我的提交按钮处理程序调用这个列表面板,它是:
var jobsList = new SearchJobsForm.jobsList();
为了更好地查看,我将完整的代码粘贴在此链接上:http://pastebin.com/a05AcVWZ
好的,
SearchJobsForm.form是您的主面板,它将包含两个组件searchForm(带文本/选择输入)和面板/结果列表。在回调中,我们将隐藏()表单并显示()结果列表。这不是一个干净的代码,但这是我能从你那里得到的最简单、最漂亮的代码。
- 首先让我们实例化jobsList
//它具有id(id:'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
- 那么你应该把所有的输入放到一个表单中(xtype:formpanel,id:'searchFormId')
- 并在表单后面添加resultPanel
这是代码
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
-最后,我们将修改ajax回调以隐藏/显示面板。不要删除其中一个,在其他地方你将无法重置你的表单
//来了
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
对于下一个项目,我建议您使用类和名称空间,以避免1000行文件;Ext.ns()是你最好的朋友,可以避免你头疼的事情。