Tôi đang thực hiện các bước đầu tiên của mình với Sencha touch. Các kết quả chỉ là những gì tôi đang sau, nhận được tuy nhiên là một cuộc đấu tranh để có được cách sencha được đặt lại với nhau. Tôi dần dần tìm ra nó nhưng đôi khi cách mã hoạt động là một chút WTF.Điều hướng bằng một nút trong sencha touch
Tôi đang cố gắng xây dựng một ứng dụng rất đơn giản, thực hiện như sau.
1) Có ba tab, Tìm kiếm lân cận (địa lý), Tìm kiếm từ khóa nhanh, Tìm kiếm danh mục.
2) Mỗi tìm kiếm tab trả về một danh sách kết quả
3) Mỗi hàng có thể nhấp để hiển thị thêm một chút thông tin.
Tôi đã tìm ra các tab được rồi.
Giống như vậy:
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
]
});
}
});
đó làm việc tuyệt vời. Không có sự khác biệt giữa các tab tôi biết nhưng tôi đang xây dựng cho điều đó ...
Phải, điều đầu tiên tôi muốn làm là tab Tìm kiếm từ khóa vì đó là tab đơn giản nhất để kiểm tra ứng dụng này.
Vì vậy, tôi thêm biểu mẫu.
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);
Vì vậy, tab cấu hình nhanh chóng của tôi bây giờ trông như thế này:
var quick = new Ext.Container({
iconCls: 'search',
title: 'Quick Search',
scroll: 'vertical',
items: [new Ext.Component({
html: '<img src="images/gfb.gif" />'
}),quickForm]
});
bây giờ tôi có một hình thức tìm kiếm chính xác làm thế nào tôi muốn và nối vào tìm kiếm json của tôi và trở về quảng cáo ra cửa sổ Console. Tuyệt quá!
Bây giờ tôi muốn tạo chế độ xem danh sách có thanh trên cùng có nút quay lại. Điều này tôi khá chắc chắn không phải là cách để thiết lập điều này, nhưng tôi thực sự đấu tranh để tìm các ví dụ về cách làm điều này như ví dụ với nguồn có một thiết lập phức tạp, và những người đơn giản không làm những gì tôi sau .
tôi bây giờ thêm một mô hình cấu hình ở phía trên cùng của tập tin index.js tôi để xác định mô hình Advert tôi
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'}
]
});
Trong listener hình thức thành công của tôi, tôi làm như sau:
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));
}
}
tác phẩm này tuy nhiên nó không trượt theo ý muốn của tôi, giống như khi nhấp vào các biểu tượng trong thanh tab phía dưới.
Bây giờ đây là nơi tôi rơi xuống, tôi không thể tìm ra cách tôi làm cho nút quay lại hoạt động để đưa tôi trở lại tìm kiếm từ khóa.
Tôi đã tìm thấy setCard và setActiveItem nhưng dường như tôi không thể truy cập vào các ngữ cảnh trong ngữ cảnh "này" trong hàm trình nghe kết quả.
Ai đó có thể đưa ra ví dụ đơn giản về cách thực hiện việc này?
++++ 1! Nhiều đồng ý về hoàn cảnh và thành công của bạn cho đến nay với Sencha Touch. Lời giải thích tuyệt vời. –