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