用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'相同。