用sencha觸摸按鈕導航

Question

我正在用Sencha觸摸我的第一步。結果正是我所追求的，然而到了那裏卻是爲了弄清sencha如何拼湊在一起。我正在慢慢地搞清楚，但有時代碼的工作方式有點WTF。

我想構建一個非常簡單的應用程序，執行以下操作。

1）有三個選項卡，搜索附近（地理位置），快速關鍵字搜索，分類搜索。
2）每個標籤搜索都會返回一個結果列表
3）每一行都可以點擊顯示更多信息。

我想出了我想的標籤。

像這樣：

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 

       var location = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Location Search', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      })] 
     }); 

     var quick = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Quick Search', 
      scroll: 'vertical', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      })] 
     }); 

     var category = new Ext.Component({ 
      iconCls: 'search', 
      title: 'Category Search', 
      html: '<img src="images/gfb.gif" /><p>Category</p>' 
     }); 
     var tabpanel = new Ext.TabPanel({ 
      fullscreen: true, 
      tabBar: { 
       dock: 'bottom', 
       scroll: 'horizontal', 
       sortable: false, 
       layout: { 
        pack: 'center' 
       } 
      }, 
      cls: 'card1', 
      items: [ 
       location, 
       quick, 
       category 
      ] 
     }); 
    } 
}); 

那偉大工程。我知道的標籤之間沒有區別，但我正在建立...

對，我想要工作的第一件事是關鍵字搜索選項卡，因爲這是最簡單的測試此應用程序。

所以我添加一個表單。

var quickFormBase = { 
       url: "../quicksearch.php?output=json", 
       items: [{ 
        xtype: 'fieldset', 
        instructions: 'The keyword search is great if you know the name of the company you are looking for, or the particular service you need to find.<p><br />To narrow it down to an area include the town or county name in your query</p>', 
        defaults: { 
         required: false, 
         labelAlign: 'left' 
        }, 
        items: [{ 
          xtype: 'textfield', 
          label: 'Search', 
          name : 'inpquery', 
          showClear: true, 
          autoCapitalize : false 
         }] 
      }], 
      listeners : { 
       submit : function(form, result){ 
      console.log('results', result.SearchResults.MainResults.Advert); 
       }, 
       exception : function(form, result){ 
        console.log('failure', Ext.toArray(arguments)); 
       } 
      } 
    }; 

var quickForm = new Ext.form.FormPanel(quickFormBase); 

所以我的快速選項卡的配置現在看起來是這樣的：

var quick = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Quick Search', 
      scroll: 'vertical', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      }),quickForm] 
}); 

我現在的樣子，我究竟是如何想和勾搭成的json的搜索和廣告返回到控制檯的形式。大！

現在我想創建一個帶有後退按鈕的頂部欄的列表視圖。我很確定這不是設置它的方法，但我真的很努力地找到關於如何做到這一點的示例，因爲源代碼的示例具有複雜的設置，並且簡單的不會執行我之後的操作。

我現在在我的index.js文件的頂部添加模型的配置來定義我的廣告模式

Ext.regModel('Advert',{ 
    fields: [ 
      {name: 'advertid', type:'int'}, 
      {name: 'Clientname', type:'string'}, 
      {name: 'telephone', type:'string'}, 
      {name: 'mobile', type:'string'}, 
      {name: 'fax', type:'string'}, 
      {name: 'url', type:'string'}, 
      {name: 'email', type:'string'}, 
      {name: 'additionalinfo', type:'string'}, 
      {name: 'address1', type:'string'}, 
      {name: 'address2', type:'string'}, 
      {name: 'address3', type:'string'}, 
      {name: 'postcode', type:'string'}, 
      {name: 'city', type:'string'}, 
      {name: 'Countyname', type:'string'}, 
      {name: 'longitude', type:'string'}, 
      {name: 'latitude', type:'string'} 
    ] 
}); 

在我的形式成功監聽我執行以下操作：

listeners : { 
       submit : function(form, result){ 

        var quickstore = new Ext.data.JsonStore({ 
         model : 'Advert', 
         data : result.SearchResults.MainResults.Advert 
        }); 

        var listConfig = { 
          tpl: '<tpl for="."><div class="advert">{Clientname}</div></tpl>', 
          scope: this, 
          itemSelector: 'div.advert', 
          singleSelect: true, 
          store: quickstore, 
          dockedItems: [ 
              { 
               xtype: 'toolbar', 
               dock: 'top', 
               items: [ 
                { 
                 text: 'Back', 
                 ui: 'back', 
                 handler: function(){ 
                  //Do some magic and make it go back, ta! 
                 } 
                } 
               ] 
              } 
             ] 
        }; 
        var list = new Ext.List(Ext.apply(listConfig, { 
         fullscreen: true 
        })); 
       }, 
       exception : function(form, result){ 
        console.log('failure', Ext.toArray(arguments)); 
       } 
     } 

該作品但是它不會像我想的那樣滑入，就像它在單擊底部選項卡欄中的圖標時一樣。

現在，這是我跌倒的地方，我無法弄清楚我是如何讓後退按鈕工作帶我回到關鍵字搜索。

我發現了setCard和setActiveItem，但我似乎無法訪問結果監聽器函數中的「this」上下文中的那些。

有人可以舉一個簡單的例子來說明如何做到這一點嗎？

Answer 1

解決這個問題的最簡單方法可能是給你的TabPanel一個id，然後在你的處理程序中引用它。嘗試更新一個tabpanel這樣的：

var tabpanel = new Ext.TabPanel({ 
    id: 'mainPanel', 
    ... the rest of your config here 

和後退按鈕的處理程序是這樣的：

handler: function() { 
    Ext.getCmp('mainPanel').layout.setActiveItem(0); 
} 

這將移動到第一個卡在一個tabpanel（您所在的位置卡）。

另外，如果要修改的價值「這個」的處理函數，你可以傳遞一個範圍：

text: 'Back', 
ui: 'back', 
scope: tabpanel, 
handler: function(){ 
    this.layout.setActiveItem(0); 
} 

「這個」，現在指的是無論你傳遞的範圍配置。看到人們使用「scope：this」是非常常見的，所以處理器內部的'this'與處理器外部的'this'相同。