如何让幻灯片多张屏幕在Sench触摸 [英] How to have the slide multiple screens in Sench touch

问题描述

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

I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.

这是我的Ext.data.Store：

Here is my 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'}]
});

以下是我正在使用的列表：

Here is the list that I am using it in:

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);
  }
});

我从我的提交按钮处理程序中调用此列表面板，它是：

And i am calling this list panel from my submit button handler which is:

var jobsList = new SearchJobsForm.jobsList();

我已经粘贴在此链接上的完整代码，以获得更好的可见性：
http://pastebin.com/a05AcvWZ

The full code I have pasted on this link for better visibility: http://pastebin.com/a05AcVWZ

推荐答案

Ok，

SearchJobsForm.form 是你的主面板，它将包含两个组件，一个 searchForm （带文本/选择输入）和面板/结果列表。
在回调中，我们将隐藏（）窗体并显示（）结果列表。这不是一个干净的代码，而是我可以从你的最简单和最亲密的代码。

SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results. In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.

• 首先让我们实例化jobList

//它的id（id：'jobsListId'）

// It has the id ( id: 'jobsListId')

var jobsList = new SearchJobsForm.jobsList();

• 那么你应该把所有的输入都放在一个表单中（xtype：formpanel ，
  id：'searchFormId'）


• 在表单



这里是代码

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回调隐藏/显示面板。不要删除其中的一个，其他地方您将无法重置您的表单

- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form

//这里它来

        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（）是你最好的朋友，会避免你头疼很多。

For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.

这篇关于如何让幻灯片多张屏幕在Sench触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！