Databases
StackOverflow2013
Postsdbo
POClickable List items in Sencha
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClickable List items in Sencha
    primarykey
    data
    text
    <p>I'm new to sencha touch. I have a list-search example. Now I want to make each of my list item clickable. i.e Clicking on which it should go to a details page. I have posted the .js file I am using. Please let me know the changes that has to be made to make the list items clickable.</p> <pre><code>Ext.application({ //setup the startup screens and icon for mobile devices tabletStartupScreen: 'resources/images/tablet_startup.png', phoneStartupScreen : 'resources/images/phone_startup.png', icon: 'resources/images/icon.png', glossOnIcon: false, // require any components we are using in this example requires: [ 'Ext.data.Store', 'Ext.List', 'Ext.field.Search', 'Ext.Toolbar' ], /** * The launch method is called when the browser is ready, and the application can launch. * * Inside our launch method we create the list and show in in the viewport. We get the lists configuration * using the getListConfiguration method which we defined below. * * If the user is not on a phone, we wrap the list inside a panel which is centered on the page. */ launch: function() { //get the configuration of the list var listConfiguration = this.getListConfiguration(); //check if the device is a phone if (!Ext.os.is.Phone) { //add a panel into the viewport Ext.Viewport.add({ //panel gets special styling when it is floating xtype: 'panel', //give it a fixed width and height width: 380, height: 420, //center the panel centered: true, //modal gives it a mask modal: true, //disable the hide on mask tap functionality of modal hideOnMaskTap: false, //give it a fit layout so the list item stretches to the size of this panel layout: 'fit', //give it 1 item which is the listConfiguration items: [listConfiguration] }).show(); } else { //add the list into the viewport Ext.Viewport.add(listConfiguration); } }, /** * Returns the configuration of the list for this example, to be inserted into the viewport in the launch method. */ getListConfiguration: function() { return { //give it an xtype of list xtype: 'list', ui: 'round', pinHeaders: false, //itemTpl defines the template for each item in the list itemTpl: '&lt;div class="contact"&gt;{firstName} &lt;strong&gt;{lastName}&lt;/strong&gt;&lt;/div&gt;', //give it a link to the store instance store: this.getStore(), grouped: true, emptyText: '&lt;div style="margin-top: 20px; text-align: center"&gt;No Matching Items&lt;/div&gt;', disableSelection: true, items: [ { xtype: 'toolbar', docked: 'top', items: [ { xtype: 'spacer' }, { xtype: 'searchfield', placeHolder: 'Search...', listeners: { scope: this, clearicontap: this.onSearchClearIconTap, keyup: this.onSearchKeyUp } }, { xtype: 'spacer' } ] } ] }; }, /** * Returns a new store instance if one hasn't been created yet * @return {Ext.data.Store} */ getStore: function() { //check if a store has already been set if (!this.store) { //if not, create one this.store = Ext.create('Ext.data.Store', { //define the stores fields fields: ['firstName', 'lastName'], //sort the store using the lastname field sorters: 'lastName', //group the store using the lastName field groupField: 'lastName', // groupField: '', //and give it some data data: [ { firstName: 'Tommy', lastName: 'Maintz' }, { firstName: 'Rupesh', lastName: 'Kumar' }, { firstName: 'Rupesh', lastName: 'Kumar' }, { firstName: 'Akshatha', lastName: 'Shetty' }, { firstName: 'Rob', lastName: 'Dougan' }, { firstName: 'Ed', lastName: 'Avins' }, { firstName: 'Jamie', lastName: 'Avins' }, { firstName: 'Dave', lastName: 'Dougan' }, { firstName: 'Abraham', lastName: 'Elias' }, { firstName: 'Jacky', lastName: 'Ngyuyen' }, { firstName: 'Jay', lastName: 'Ngyuyen' }, { firstName: 'Jay', lastName: 'Robinson' }, { firstName: 'Rob', lastName: 'Avins' }, { firstName: 'Ed', lastName: 'Dougan' }, { firstName: 'Jamie', lastName: 'Poulden' }, { firstName: 'Dave', lastName: 'Spencer' }, { firstName: 'Abraham', lastName: 'Avins' }, { firstName: 'Jacky', lastName: 'Avins' }, { firstName: 'Rob', lastName: 'Kaneda' }, { firstName: 'Ed', lastName: 'Elias' }, { firstName: 'Tommy', lastName: 'Dougan' }, { firstName: 'Rob', lastName: 'Robinson' } ] }); } //return the store instance return this.store; }, /** * Called when the search field has a keyup event. * * This will filter the store based on the fields content. */ onSearchKeyUp: function(field) { //get the store and the value of the field var value = field.getValue(), store = this.getStore(); //first clear any current filters on thes tore store.clearFilter(); //check if a value is set first, as if it isnt we dont have to do anything if (value) { //the user could have entered spaces, so we must split them so we can loop through them all var searches = value.split(' '), regexps = [], i; //loop them all for (i = 0; i &lt; searches.length; i++) { //if it is nothing, continue if (!searches[i]) continue; //if found, create a new regular expression which is case insenstive regexps.push(new RegExp(searches[i], 'i')); } //now filter the store by passing a method //the passed method will be called for each record in the store store.filter(function(record) { var matched = []; //loop through each of the regular expressions for (i = 0; i &lt; regexps.length; i++) { var search = regexps[i], didMatch = record.get('firstName').match(search) || record.get('lastName').match(search); //if it matched the first or last name, push it into the matches array matched.push(didMatch); } //if nothing was found, return false (dont so in the store) if (regexps.length &gt; 1 &amp;&amp; matched.indexOf(false) != -1) { return false; } else { //else true true (show in the store) return matched[0]; } }); } }, /** * Called when the user taps on the clear icon in the search field. * It simply removes the filter form the store */ onSearchClearIconTap: function() { //call the clearFilter method on the store instance this.getStore().clearFilter(); } }); </code></pre> <p>Thanks in adv.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTitouan de Bailleul
    1. USAkshatha
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    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. COYou know you're supposed to accept an answer when one of them answers your question ? If none of them does, then maybe you should provide more information about your problem.
      singulars
      1. POClickable List items in Sencha
      1. USTitouan de Bailleul
    2. COpls assist me in this link: http://stackoverflow.com/questions/10596404/need-help-in-sencah-touch-2-search-list thanks
      singulars
      1. POClickable List items in Sencha
      1. USApulo Ohale Cosmas Lite
 

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