Я делаю свои первые шаги с прикосновением Сенчи.Результаты - это то, чего я добиваюсь, но добиваться успеха - это борьба за то, как соединяют сенчу.Я постепенно разбираюсь с этим, но иногда код работает немного 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" в функции прослушивателя результатов.
Может кто-нибудь привести простой пример того, как это сделатьэто?