10

我正在使用 Sencha touch 迈出第一步。结果正是我所追求的,但是要到达那里却很难弄清煎茶是如何组合在一起的。我正在慢慢弄清楚,但有时代码的工作方式有点 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 文件的顶部添加一个模型配置来定义我的 Advert 模型

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”上下文中访问它们。

有人可以举一个简单的例子来说明如何做到这一点吗?

4

1 回答 1

12

解决这个问题的最简单方法可能是给你的 TabPanel 一个 id,然后在你的处理程序中引用它。尝试像这样更新您的标签面板:

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

你的后退按钮处理程序是这样的:

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

这将移至标签面板中的第一张卡片(您的位置卡片)。

或者,如果你想在处理函数中修改 'this' 的值,你可以传入一个作用域:

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

'this' 现在指的是您在范围配置中传递的任何内容。人们经常使用“范围:this”,因此处理程序内部的“this”与处理程序外部的“this”相同。

于 2010-10-26T00:52:17.340 回答