我用Sencha触摸我的第一步.结果就是我之后,到达那里是一个斗争,以获得如何组合在一起.我慢慢地想出来,但有时代码的工作方式有点WTF.
我正在尝试构建一个非常简单的应用程序,执行以下操作.
1)有三个选项卡,附近搜索(geo),快速关键词搜索,类别搜索.
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',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',{name: 'mobile',{name: 'fax',{name: 'url',{name: 'email',{name: 'additionalinfo',{name: 'address1',{name: 'address2',{name: 'address3',{name: 'postcode',{name: 'city',{name: 'Countyname',{name: 'longitude',{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
}));
},Ext.toArray(arguments));
}
}
这样做是不会像我想要的那样滑动,就像点击底部标签栏中的图标一样.
现在这是我跌倒的地方,我无法弄清楚我如何使后退按钮工作,让我回到关键字搜索.
我已经找到了setCard和setActiveItem,但我似乎无法访问结果侦听器函数中的“this”上下文中的那些.
有人可以给出一个如何做到这一点的简单例子吗？
解决方法
解决这个问题的最简单方法可能是通过给你的TabPanel一个id,然后在你的处理程序中引用它.尝试更新您的tabpanel,如下所示：
var tabpanel = new Ext.TabPanel({
id: 'mainPanel',... the rest of your config here
和你的后退按钮处理程序,如下所示：
handler: function() {
Ext.getCmp('mainPanel').layout.setActiveItem(0);
}
这将移动到标题板(您的位置卡)中的第一张卡.
或者,如果要在handler函数中修改“this”的值,只需传递一个范围：
text: 'Back',scope: tabpanel,handler: function(){
this.layout.setActiveItem(0);
}
‘this’现在指的是您在范围配置中传递的任何内容.看到人们使用“范围：这个”是很常见的,所以他们的处理程序中的’这个’与处理程序之外的’这个’相同.
