Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed Help In Sencah Touch 2 Search List
    primarykey
    data
    text
    <p>i have problem achieving the exact result i want in building a sencha Search List, i managed to build just a list but the actual result i want is just something like this <a href="http://docs.sencha.com/touch/2-0/#!/example/search-list" rel="nofollow noreferrer">http://docs.sencha.com/touch/2-0/#!/example/search-list</a> i have followed the example to build something similar, but my serach is not working, hope somebody can give me a detailed answer on how to achive this. below are my codes from my controller to the last.</p> <p>this is my controller Ext.define('List.controller.Main', { extend: 'Ext.app.Controller',</p> <pre><code>config: { refs: { main: 'mainpanel' }, control: { 'presidentlist': { disclose: 'showDetail' } } }, showDetail: function(list, record) { this.getMain().push({ xtype: 'presidentdetail', title: record.fullName(), data: record.getData() }) } </code></pre> <p>}); This is my model</p> <pre><code>Ext.define('List.model.President', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'middleInitial', 'lastName'] }, fullName: function() { var d = this.data, names = [ d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName ]; return names.join(" "); } </code></pre> <p>});</p> <p>this is my store</p> <pre><code>Ext.define('List.store.Presidents', { extend: 'Ext.data.Store', config: { model: 'List.model.President', sorters: 'lastName', grouper : function(record) { return record.get('lastName')[0]; }, data: [ { firstName: "George", lastName: "Washington" }, { firstName: "John", lastName: "Adams" }, { firstName: "Thomas", lastName: "Jefferson" }, { firstName: "James", lastName: "Madison" }, ] } </code></pre> <p>}); this is my views, under my view folder,</p> <pre><code>Ext.define('List.view.Main', { extend: 'Ext.navigation.View', xtype: 'mainpanel', requires: [ 'List.view.PresidentList', 'List.view.PresidentDetail' ], config: { items: [{ xtype: 'presidentlist' }] } </code></pre> <p>});</p> <p>still under my view folder PresidentDetail</p> <pre><code>Ext.define('List.view.PresidentDetail', { extend: 'Ext.Panel', xtype: 'presidentdetail', config: { title: 'Details', styleHtmlContent: true, scrollable: 'vertical', tpl: [ 'Why Not Work {firstName} {lastName}!' ] } </code></pre> <p>});</p> <p>still under my view folder i have another file called PresidentList</p> <pre><code>Ext.define('List.view.PresidentList', { extend: 'Ext.List', xtype: 'presidentlist', requires: ['List.store.Presidents'], config: { xtype:'container', title: 'Why Not Work', grouped: true, itemTpl: '{firstName} {lastName}', styleHtmlContent: true, store: 'Presidents', onItemDisclosure: true, items: [ { xtype: 'searchfield', name:'searchfield', placeHolder:'Search', }, { xtype: 'spacer', height: 25 }, ] } </code></pre> <p>});</p> <p>This is my App.js file</p> <p>Ext.application({ name: 'List',</p> <pre><code>requires: [ 'Ext.field.Search' ], controllers: ['Main'], views: ['Main'], stores: ['Presidents'], models: ['President'], launch: function() { Ext.Viewport.add({ xtype: 'mainpanel' }); } </code></pre> <p>});</p> <p>Am sorry i have to post my whole app here, am just trying to get my qestion as detailed as possible. at the moment, my current app displays as this but the search field is not functioning. i need help please thanks</p> <p><img src="https://i.stack.imgur.com/dnL7x.png" alt="my current output"></p> <p>i seriously need help please. the result i wish to achieve is something like this so that once the user is about to search the field, the list of the names stored starting from R will all show up: <img src="https://i.stack.imgur.com/TzV7G.jpg" alt="This is what i need"></p> <p>Thanks for your assistance.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload