Question

我正在开发一个应用程序，当在表单中单击提交按钮时，它应该转到另一个屏幕。然而，它只是在窗口外打印结果而不是真正进入新的屏幕。我已经对存储进行了硬编码以确保在启动应用程序时存在数据，并且仍然将其打印在可视区域之外。

这是我的Ext.data.Store：

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

Answer 1

确定，

SearchJobsForm.form 是您的主面板，它将包含两个组件 searchForm （带有文本/选择输入）和面板/结果列表< / strong>即可。在回调中，我们将隐藏（）表单并显示（）结果列表。这不是一个干净的代码，而是我能从你那里得到的最简单和最真实的代码。

首先让我们实例化jobsList

//它有id（id：＆＃39; jobsListId＆＃39;）

var jobsList = new SearchJobsForm.jobsList();

然后你应该把所有的输入都放到一个表格中（xtype：formpanel， id：＆＃39; searchFormId＆＃39;）

并在表单
之后添加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（）是你最好的朋友，可以避免你很多麻烦。

如何在Sencha touch中滑动多个屏幕

1 个答案: