使用sencha touch中的按鈕導航

[英]Navigating with a button in sencha touch


I am taking my first steps with Sencha touch. The results are just what I am after, getting there however is a struggle to get how sencha is put together. I am slowly figuring it out but sometimes the way the code works is a bit WTF.

我開始邁出第一步。結果就是我想要的結果,然而要達到這個目標卻需要努力去弄清楚sencha是如何被整合在一起的。我慢慢地想出來了,但是有時候代碼的工作方式有點像WTF。

I am trying to build a very simple app that does the following.

我正在嘗試構建一個非常簡單的應用程序來實現以下功能。

1) Has three tabs, Search nearby (geo), Quick Keyword Search, Category Search.
2) Each of the tabs search returns a list of results
3) Each of the rows are click able to show a bit more information.

1)有三個選項卡,搜索附近(geo),快速關鍵詞搜索,類別搜索。

I have figured out the tabs okay I think.

我想我已經算出標簽了。

Like so:

像這樣:

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

That works great. No difference between the tabs I know but I'm building up to that...

偉大的工作。我知道的標簽之間沒有區別,但我正在努力……

Right, the first thing I want to work on is the Keyword search tab as that is the simplest one to test for this app.

我首先要做的是關鍵字搜索標簽因為這是這個應用最簡單的測試。

So I add a form.

我添加一個表單。

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

So my quick tab config now looks like this:

現在我的快捷選項卡配置如下:

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

I now have a form looking exactly how I want and hooked into my json search and returning adverts to the console. Great!

現在,我有了一個表單,它可以精確地查找我想要的內容,並將其連接到json搜索中,並將廣告返回到控制台。太棒了!

Now I want to create a list view that has a top bar with a back button. This I am pretty sure is not the way to set this up, but I am really struggling to find examples on how to do this as the example with the source have a complicated setup, and the simple ones don't do what I am after.

現在我要創建一個列表視圖,它有一個頂部欄和一個后退按鈕。我很確定這不是設置它的方法,但是我真的很難找到如何做這個的例子,因為源碼的例子有一個復雜的設置,而簡單的例子沒有我想要的那樣。

I now add a model config at the top of my index.js file to define my Advert model

現在我在索引的頂部添加了一個模型配置。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'}
    ]
});

In my form success listener I do the following:

在我的《成功的聽者》中,我做了以下的事:

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

This works however it doesn't slide in as I would like, as it does when clicking the icons in the bottom tab bar.

不過它不會像我希望的那樣滑動,就像它在單擊底部選項卡欄中的圖標時所做的那樣。

Now this is where I fall down, I can't figure out how I make the back button work to take me back to the keyword search.

現在這就是我失敗的地方,我不知道如何讓后退按鈕工作,讓我回到關鍵字搜索。

I have found setCard and setActiveItem but I don't seem able to access those in the "this" context in the result listener function.

我找到了setCard和setActiveItem,但是我似乎無法在result listener函數的“this”上下文中訪問它們。

Could someone give a simple example of how to do this?

有人能舉一個簡單的例子嗎?

1 个解决方案

#1


12  

The easiest way to solve this is probably by giving your TabPanel an id and then referencing it inside your handler. Try updating your tabpanel like this:

解決這個問題最簡單的方法可能是給TabPanel一個id,然后在處理程序中引用它。試着像這樣更新你的選項卡:

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

And your back button handler like this:

你的后退按鈕處理器是這樣的:

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

This will move to the first card in the tabpanel (your location card).

這將移動到tabpanel(您的位置卡)中的第一張卡片。

Alternatively, if you want to modify the value of 'this' in the handler function, you can just pass in a scope:

另外,如果您想要在handler函數中修改“this”的值,只需傳入一個范圍:

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

'this' now refers to whatever you passed in on the scope config. It's very common to see people use "scope: this" so that 'this' inside their handler is the same as 'this' outside the handler.

“this”現在指的是您在范圍配置中傳入的任何內容。看到人們使用“scope: this”是很常見的,因此他們處理程序內部的‘this’與處理程序外部的‘this’是相同的。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/10/21/8ae00a099e9d303e8761116af1d3853a.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com