Sencha Touch searchable list — new view with data proxy

Question

Two quick questions here... How can I use this example

http://try.sencha.com/touch/2.0.0/examples/list-search/

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"

I know the answer is pretty easy but I am still a young grasshoppa and need a push in the right direction.

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:

Store:

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

Model:

Ext.define('FirstApp.model.people', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent']
    }
});

So, how can I turn that example into a "view" inside my application, with my data store and model?

Any help is greatly appreciated! Thank you!

Jake

-----------UPDATE-------------

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 ??

Search list:

Ext.define('FirstApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',

config: {
    store : 'Students',

    itemTpl:
        '<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
    itemCls:'place-entry',

    items: [
        {
            xtype: 'toolbar',
            docked: 'top',

            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search People...',
                    itemId: 'searchBox'
                }
            ]
        }
    ]
}
});

Details view (that I want to open when name is clicked from Search list/Mainpanel view):

Ext.define('FirstApp.view.Details',{
    extend:'Ext.Panel',
    xtype:'details',
    config:{
    layout:'fit',
    tpl:'<div class="image_container"><img src="{image}"></div>' +
        '<h1>{firstName:ellipsis(25)} {lastName:ellipsis(25)}</h1>'+
        '<div class="status_container">{status:ellipsis(25)}</div> '+
        '<div class="glance_container">    <div class="value_box"><div class="value_number"> {rank:ellipsis(25)}</div> <p class="box_name">Rank</p> </div>    <div class="value_box"><div class="value_number"> {attendance:ellipsis(25)}</div> <p class="box_name" style="margin-left: -10px;">Attendance</p> </div>  <div class="value_box"><div class="value_number">{discipline:ellipsis(25)}</div> <p class="box_name" style="margin-left: -4px;">Discipline</p> </div>    <div class="value_box"><div class="value_number"> {recent:ellipsis(25)}</div> <p class="box_name">Recent</p> </div> </div> '+
        '<h2>Phone:</h2> <div class="phone_num"><p><a href="tel:{phone:ellipsis(25)}">{phone:ellipsis(25)}</a></p></div>'+
        '<h3>Some info:</h3><p>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.</p>',

    scrollable:true,
    styleHtmlContent:true,
    styleHtmlCls:'details'
}

})

Search Controller:

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){  // <-----NOT WORKING 
        this.getPlacesContainer().push({
            xtype:'details',
            store:'Students',
            title:record.data.name,
            data:record.data
        })

    }
});

Alexander Rolek Alexander Rolek · Accepted Answer · 2012-10-08T20:29:17

Good question. I assume you are trying to build a List or dataview. The key here is to give your store a 'storeId'. I have modified your store below:

Ext.define('FirstApp.store.StudentStore',{
    extend:'Ext.data.Store',
    config:{
        storeId: 'Students', // Important for view binding and global ref
        autoLoad:true,
        model:'FirstApp.model.people',
        sorters: 'lastName',
        proxy:{
            type:'ajax',
            url:'http://xxxyyyzzz.com/data/dummy_data.json',
            reader:{
                type:'json',
                rootProperty:'results'
            }
        }
    }
});

Then inside your view, you reference the store to bind to. Here is an example List view from one of my applications. Notice the config object has 'store' which references our above store:

Ext.define('app.view.careplan.CarePlanTasks', {
    extend: 'Ext.dataview.List',
    xtype: 'careplanTasks',
    requires: [
        'app.view.template.CarePlan'
    ],
    config: {
        store: 'Students', // Important!  Binds this view to your store
        emptyText: 'No tasks to display',
        itemTpl: Ext.create('app.view.template.CarePlan'),
    },

    constructor : function(config) {
        console.log('CarePlan List');
        this.callParent([config]);
    }
});

Now that you have a storeId, you can access this store anywhere in your application by doing the following:

Ext.getStore('Students')

You can load records from your server by calling the load method as well:

Ext.getStore('Students').load();

You can do this anywhere in your application, but typically it's best to do in your controllers.

Hope this helps.

======= Updates to your updates ======

So looking at your code I think you need to modify your List view and the controller. Give 'FirstApp.view.MainPanel' an xtype: 'MainPanel'. Next modify your controller config as follows:

config: {
    profile: Ext.os.deviceType.toLowerCase(),
    stores : ['StudentStore'],
    models : ['people'],
    refs: {
        mainPanel: 'MainPanel',    // set the object KEY to the name you want to use in the control object and set the VALUE to the xtype of the view
        placesContainer:'placesContainer'
    },
    control: {
        'mainPanel': {   //  this matches the key above, which points to your view's xtype
            activate: 'onActivate',
            itemtap: 'onItemTap'  //  listen for the item tap event on this List
        },
        'mainPanel searchfield[itemId=searchBox]' : {
            clearicontap : 'onClearSearch',
            keyup: 'onSearchKeyUp'
        },
        'placesContainer places list':{
            itemtap:'onItemTap'
        }
    }

},

Sencha Touch searchable list — new view with data proxy

1 Answers