Sencha Touch - 显示搜索表单的搜索结果

Question

我很感谢您的任何帮助。我刚刚开始构建我的第一个sencha应用程序，并对迄今为止的结果感到满意，但现在我停留在一件事上。我已经构建了一个搜索表单，并希望能够在同一页面上显示结果，但这是我卡住的地方。表单工作并使用GET发送结果，但不会将其发送到正确的位置。我想在同一页面上展示它（我已经构建了一个名为search.php的php文件来处理结果），但它会使用url中的变量重新加载整个应用程序。

我已经测试了所有的代码，远离应用程序，它的工作原理非常完美，所以我知道问题不在代码中，但更多的是我对Sencha缺乏理解，所以对任何帮助都非常感激。

代码：

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(); 
       } 
      }] 
     }] 
    }] 
}); 

我又试图用它显示在同一页面上的结果，但我说这是行不通的。它根本不会调用search.php页面。

我已经确保所有的文件（除了位于js文件夹中的index.js文件）与index.html文件位于同一目录中。

我也试过seperately通过加载在应用程序中的文件：

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' 
     } 
    } 
}); 

和完美的作品，所以我知道，所有的PHP的东西是工作，并与煎茶触摸工作，但我只是不知道如何让它只有当有人点击'搜索'

我很感激任何帮助，因为我花了几天的时间在网上搜索得到这个修复程序，但似乎没有要工作:(

我不知道这是否有帮助，但米ain JavaScript文件是：

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 
      ] 
     }); 
    } 
}) 

Answer 1

只需使用filter（）函数更新您的商店。首先，您必须将正确的filterParam添加到商店配置中。之后，您可以在搜索按钮处理程序中调用filter（）函数。例如。

searchForm.filter('keywordParam', searchfield.getValue()); 

在此之后，您的商店将得到更新，而无需刷新页面。然后你可以使用DataView来显示你的搜索结果。