Sench touchでスライドを複数の画面に表示する方法

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

[OK]を、

SearchJobsForm.formがあなたのメインパネルで、それは二つの成分searchForm（テキストの入力/選択）し、結果のパネル/リストが含まれています。 コールバックでは、フォームをhide（）し、結果リストを表示します（）。これはクリーンなコードではありませんが、私はあなたから得ることができる最もシンプルでキッスなものです。フォームにすべての入力を置く必要があり、その後

var jobsList = new SearchJobsForm.jobsList(); 

• （：
  • まずはjobsList

  をインスタンス化してみましょうが//これは、ID（ 'jobsListId' id）を持っています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コールバックを変更します。そのうちの1枚を取り外し、別の場所にあなたがここにそれがあなたの次のプロジェクトのために

 Ext.util.JSONP.request({ 
      url: "http://"+serverAdd+":"+ port+"https://stackoverflow.com/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（）はあなたの親友であり、頭痛を避けることができます。