Sencha Touch - résultats du formulaire de recherche

Question

Je serais reconnaissant pour toute aide s'il vous plaît. Je viens de commencer à construire ma première application Sencha et je suis content des résultats obtenus jusqu'à maintenant, mais je suis maintenant coincé sur une chose. J'ai construit un formulaire de recherche et je veux être en mesure d'afficher les résultats sur la même page, mais c'est là que je suis coincé. Le formulaire fonctionne et envoie les résultats en utilisant GET, mais il ne l'envoie pas au bon endroit. Je veux le montrer sur la même page (j'ai construit un fichier php appelé search.php pour gérer les résultats), mais il recharge l'ensemble de l'application avec les variables dans l'URL. J'ai testé tout le code loin de l'application et cela fonctionne parfaitement, donc je sais que le problème n'est pas avec le code, mais plus avec mon manque de compréhension de Sencha, je serais extrêmement reconnaissant pour toute aide.

code:

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

J'ai ensuite essayé d'utiliser cette option pour afficher les résultats sur la même page, mais comme je dis cela ne fonctionne tout simplement pas. Il n'appelle pas du tout la page search.php.

Je me suis assuré que tous les fichiers (à l'exception du fichier index.js qui se trouve dans un dossier js) se trouvent dans le même répertoire que le fichier index.html.

J'ai aussi essayé de charger le fichier dans l'application séparement en utilisant:

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

et qui fonctionne parfaitement et je sais que tous les trucs de php fonctionne et ne fonctionne avec Sencha Touch, mais Je ne suis pas sûr de savoir comment l'obtenir ne fonctionne que lorsque quelqu'un clique sur 'recherche'

Je serais reconnaissant pour toute aide à ce sujet que j'ai passé des jours à chercher sur le web pour obtenir cette solution, mais rien ne semble travailler :(

Je ne sais pas si cela aide, mais le m ain fichier javascript est:

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

Il suffit de mettre à jour votre magasin avec la fonction filter(). Vous devez d'abord ajouter le filterParam correct à la configuration de votre magasin. Après cela, vous pouvez appeler la fonction filter() dans votre gestionnaire de boutons de recherche. Par exemple.

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

Après cela, votre magasin sera mis à jour sans actualisation de la page. Vous pouvez ensuite utiliser un DataView pour afficher vos résultats de recherche.