Javascript Sencha Touch-显示搜索表单的结果
如果有任何帮助，我将不胜感激。我刚刚开始构建我的第一个sencha应用程序，并对目前为止的结果感到满意，但现在我只专注于一件事。我已经建立了一个搜索表单，希望能够在同一页上显示结果，但这正是我遇到的问题。表单工作并使用GET发送结果，但它没有将结果发送到正确的位置。我想在同一个页面上显示它（我已经构建了一个名为search.php的php文件来处理结果），但是它使用url中的变量重新加载整个应用程序 我已经测试了应用程序之外的所有代码，它工作得非常完美，因此我知道问题不在于代码，而在于我对Sencha缺乏了解，因此非常感谢您的帮助 代码： 然后我尝试使用它在同一页上显示结果，但正如我所说的，这根本不起作用。它根本不调用search.php页面 我已经确保所有文件（除了js文件夹中的index.js文件）都与index.html文件位于同一目录中 我还尝试使用以下方法在应用程序中单独加载文件：Javascript Sencha Touch-显示搜索表单的结果,javascript,iphone,mobile,sencha-touch,extjs,Javascript,Iphone,Mobile,Sencha Touch,Extjs,如果有任何帮助，我将不胜感激。我刚刚开始构建我的第一个sencha应用程序，并对目前为止的结果感到满意，但现在我只专注于一件事。我已经建立了一个搜索表单，希望能够在同一页上显示结果，但这正是我遇到的问题。表单工作并使用GET发送结果，但它没有将结果发送到正确的位置。我想在同一个页面上显示它（我已经构建了一个名为search.php的php文件来处理结果），但是它使用url中的变量重新加载整个应用程序 我已经测试了应用程序之外的所有代码，它工作得非常完美，因此我知道问题不在于代码，而在于我对Sen
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php?keywords=test',
reader: {
type: 'tree',
root: 'items'
}
}
});
var tabPanel;
var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
scroll:{direction:'vertical',threshold:7},
items: [{
html: '<center><p>Home</p></center>'
}]
});
var servicePanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: '<center>Please choose a service</center>'
}]
});
var searchPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: '<center>Search</center>'
}]
});
var feedtabpanel = new Ext.Carousel({
title: 'More',
iconCls: 'more',
fullscreen: true,
sortable : true,
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: [
{
title: 'Contact',
html : '<center><h1>Contact Us</h1></center>',
},
{
title: 'Feedback',
html : '<center><h1>Let us know what you think<h1></center>',
},
{
title: 'Tell a friend',
html : '<center><h1>Tell your friends how much you love this app</h1></center>',
}
]
});
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var store = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'areas.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
store: store,
iconCls: 'locate',
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
var services = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'subcats.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var servicesList = new Ext.NestedList({
fullscreen: true,
title: 'Services',
displayField: 'text',
store: services,
iconCls: 'team',
});
servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = servicesList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
servicesList,
searchForms,
feedtabpanel
]
});
}
})
var选项卡面板；
var homePanel=新的外部面板({
标题:"家",，
iconCls:“家”，
全屏：对，
滚动：{方向：'vertical'，阈值：7}，
项目：[{
html:“Home”
}]
});
var servicePanel=新的外部面板({
标题：“服务”，
iconCls：“团队”，
全屏：对，
项目：[{
html:“请选择一项服务”
}]
});
var searchPanel=新的外部面板({
标题：“搜索”，
iconCls:“搜索”，
全屏：对，
项目：[{
html:“搜索”
}]
});
var feedtabpanel=新的外部转盘({
标题：“更多”，
iconCls：“更多”，
全屏：对，
可排序：是的，
xtype:“面板”，
滚动：{方向：'vertical'，阈值：7}，
项目：[
{
标题：“联系人”，
html:“联系我们”，
},
{
标题：“反馈”，
html:“让我们知道你的想法”，
},
{
标题：“告诉朋友”，
html:'告诉你的朋友你有多喜欢这个应用'，
}
]
});
searchForms=new Ext.TabPanel({
全屏：对，
标题：“搜索”，
显示字段：“文本”，
存储：searchForm，
iconCls:“搜索”，
项目：[{
id:'搜索提交'，
xtype:'表单'，
标准提交：对，
滚动：‘垂直’，
项目：[{
xtype:“字段集”，
标题：“关键字”，
默认值：{
//labelAlign:“对”
标签宽度：“35%”
},
项目：[{
xtype:'textfield'，
名称：'关键字'，
id:'关键字'，
占位符：“例如：音乐、电视”，
自动资本化：没错，
要求：正确，
useClearIcon:true
}]
}, {
xtype:“字段集”，
标题：“高级搜索”，
项目：[{
xtype:'selectfield'，
名称：'流派'，
id:'流派'，
标签：“流派”，
选项：[{
文本：“全部”，
值：“”
文本：“国家”，
值：“1”
文字：'科幻'，
值：“2”
文本：“西部”，
值：“3”
}]
}, {
xtype:'selectfield'，
名称：'媒体'，
id:'媒体'，
标签：“媒体”，
选项：[{
文本：“全部”，
值：“”
文字：“音乐”，
值：“1”
文字：“电视”，
值：“2”
文字：“电影”，
值：“3”
}]
}]
}, {
布局：“vbox”，
默认值：{xtype:'button'，flex:1，style:'margin:.5em；'}，
项目：[{
文本：“搜索”，
ui:'确认'，
范围:本,，
错,，
处理程序：函数（）{
searchForms.submit({
url:'search.php'
});
}
}, {
文本：“重置”，
用户界面：“拒绝”，
处理程序：函数（）{
searchForms.reset（）；
}
}]
}]
}]
});
Ext.regModel（'mobile'{
字段：[
{name:'text'，键入：'string'}
]
});
var searchForm=new Ext.data.TreeStore({
型号:"流动",，
代理：{
键入：“ajax”，
url:'search.php'，
读者：{
键入：“树”，
root:'项目'
}
}
});
var store=new Ext.data.TreeStore({
型号:"流动",，
代理：{
键入：“ajax”，
url:'areas.php'，
读者：{
键入：“树”，
root:'项目'
}
}
});
var nestedList=new Ext.nestedList({
全屏：对，
标题：“地点”，
显示字段：“文本”，
店:店,，
iconCls:“定位”，
});
nestedList.on（'LeaftItemTap'，函数（子列表、子IDX、el、e）{
var store=subList.getStore（），
记录=store.getAt（subIdx），
recordNode=record.node，
title=nestedList.renderItemText（recordNode），
卡片、隐藏、动画；
var tabPanel;
var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
scroll:{direction:'vertical',threshold:7},
items: [{
html: '<center><p>Home</p></center>'
}]
});
var servicePanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: '<center>Please choose a service</center>'
}]
});
var searchPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: '<center>Search</center>'
}]
});
var feedtabpanel = new Ext.Carousel({
title: 'More',
iconCls: 'more',
fullscreen: true,
sortable : true,
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: [
{
title: 'Contact',
html : '<center><h1>Contact Us</h1></center>',
},
{
title: 'Feedback',
html : '<center><h1>Let us know what you think<h1></center>',
},
{
title: 'Tell a friend',
html : '<center><h1>Tell your friends how much you love this app</h1></center>',
}
]
});
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var store = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'areas.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
store: store,
iconCls: 'locate',
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
var services = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'subcats.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var servicesList = new Ext.NestedList({
fullscreen: true,
title: 'Services',
displayField: 'text',
store: services,
iconCls: 'team',
});
servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = servicesList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
servicesList,
searchForms,
feedtabpanel
]
});
}
})
searchForm.filter('keywordParam', searchfield.getValue());