Databases
StackOverflow2013
Postsdbo
POSencha Touch searchable list -- new view with data proxy
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSencha Touch searchable list -- new view with data proxy
    primarykey
    data
    text
    <p>Two quick questions here... How can I use this example</p> <p><a href="http://try.sencha.com/touch/2.0.0/examples/list-search/" rel="nofollow">http://try.sencha.com/touch/2.0.0/examples/list-search/</a> </p> <p>of a searchable list, but opened in a NEW view? The example has it defined as the main application in app.js, but I would like to use it in "FirstApp.view.searchlist" </p> <p>I know the answer is pretty easy but I am still a young grasshoppa and need a push in the right direction. </p> <p>Also, rather than pulling the data from the embedded store like the example, I would like to modify it to pull my data from my external/proxy JSON store, which is defined as follows:</p> <p>Store:</p> <pre><code>Ext.define('FirstApp.store.StudentStore',{ extend:'Ext.data.Store', config:{ autoLoad:true, model:'FirstApp.model.people', sorters: 'lastName', proxy:{ type:'ajax', url:'http://xxxyyyzzz.com/data/dummy_data.json', reader:{ type:'json', rootProperty:'results' } } } }); </code></pre> <p>Model:</p> <pre><code>Ext.define('FirstApp.model.people', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent'] } }); </code></pre> <p>So, how can I turn that example into a "view" inside my application, with my data store and model?</p> <p>Any help is greatly appreciated! Thank you!</p> <p>Jake</p> <p><strong>-----------UPDATE-------------</strong></p> <p>Ok fantastic. I was able to implement the search feature (stoked) by combining your methods with another tutorial I found. Now one more question...Seems so easy but it is tough! How can I open my new 'Details' view once an item is selected/clicked ??</p> <p>Search list:</p> <pre><code>Ext.define('FirstApp.view.MainPanel', { extend: 'Ext.dataview.List', alias : 'widget.mainPanel', config: { store : 'Students', itemTpl: '&lt;h1&gt;{firstName:ellipsis(45} {lastName:ellipsis(45)}&lt;/h1&gt;' , itemCls:'place-entry', items: [ { xtype: 'toolbar', docked: 'top', items: [ { xtype: 'searchfield', placeHolder: 'Search People...', itemId: 'searchBox' } ] } ] } }); </code></pre> <p>Details view (that I want to open when name is clicked from Search list/Mainpanel view):</p> <pre><code>Ext.define('FirstApp.view.Details',{ extend:'Ext.Panel', xtype:'details', config:{ layout:'fit', tpl:'&lt;div class="image_container"&gt;&lt;img src="{image}"&gt;&lt;/div&gt;' + '&lt;h1&gt;{firstName:ellipsis(25)} {lastName:ellipsis(25)}&lt;/h1&gt;'+ '&lt;div class="status_container"&gt;{status:ellipsis(25)}&lt;/div&gt; '+ '&lt;div class="glance_container"&gt; &lt;div class="value_box"&gt;&lt;div class="value_number"&gt; {rank:ellipsis(25)}&lt;/div&gt; &lt;p class="box_name"&gt;Rank&lt;/p&gt; &lt;/div&gt; &lt;div class="value_box"&gt;&lt;div class="value_number"&gt; {attendance:ellipsis(25)}&lt;/div&gt; &lt;p class="box_name" style="margin-left: -10px;"&gt;Attendance&lt;/p&gt; &lt;/div&gt; &lt;div class="value_box"&gt;&lt;div class="value_number"&gt;{discipline:ellipsis(25)}&lt;/div&gt; &lt;p class="box_name" style="margin-left: -4px;"&gt;Discipline&lt;/p&gt; &lt;/div&gt; &lt;div class="value_box"&gt;&lt;div class="value_number"&gt; {recent:ellipsis(25)}&lt;/div&gt; &lt;p class="box_name"&gt;Recent&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; '+ '&lt;h2&gt;Phone:&lt;/h2&gt; &lt;div class="phone_num"&gt;&lt;p&gt;&lt;a href="tel:{phone:ellipsis(25)}"&gt;{phone:ellipsis(25)}&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;'+ '&lt;h3&gt;Some info:&lt;/h3&gt;&lt;p&gt;Round all corners by a specific amount, defaults to value of $default-border-radius. When two values are passed, the first is the horizontal radius and the second is the vertical radius.&lt;/p&gt;', scrollable:true, styleHtmlContent:true, styleHtmlCls:'details' } }) </code></pre> <p>Search Controller:</p> <pre><code>Ext.define('FirstApp.controller.SearchController', { extend : 'Ext.app.Controller', config: { profile: Ext.os.deviceType.toLowerCase(), stores : ['StudentStore'], models : ['people'], refs: { myContainer: 'MainPanel', placesContainer:'placesContainer' }, control: { 'mainPanel': { activate: 'onActivate' }, 'mainPanel searchfield[itemId=searchBox]' : { clearicontap : 'onClearSearch', keyup: 'onSearchKeyUp' }, 'placesContainer places list':{ itemtap:'onItemTap' } } }, onActivate: function() { console.log('Main container is active'); }, onSearchKeyUp: function(searchField) { queryString = searchField.getValue(); console.log(this,'Please search by: ' + queryString); var store = Ext.getStore('Students'); store.clearFilter(); if(queryString){ var thisRegEx = new RegExp(queryString, "i"); store.filterBy(function(record) { if (thisRegEx.test(record.get('firstName')) || thisRegEx.test(record.get('lastName'))) { return true; }; return false; }); } }, onClearSearch: function() { console.log('Clear icon is tapped'); var store = Ext.getStore('Students'); store.clearFilter(); }, init: function() { console.log('Controller initialized'); }, onItemTap:function(list,index,target,record){ // &lt;-----NOT WORKING this.getPlacesContainer().push({ xtype:'details', store:'Students', title:record.data.name, data:record.data }) } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjakeforaker
    1. USjakeforaker
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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