How to open Search List example in new view?

[jakeed2]

Hello all,

Two questions here... How can I use this example http://try.sencha.com/touch/2.0.0/examples/list-search/ of a searchable list, opened in a NEW view? Right now it is 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 a noob and need a push in the right direction.

Also, rather than pulling the data from the embedded store, 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://xxxxxxx.com/xxxx/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']
    }
});

Or is there an easier way to do a searchable list?
Any help is greatly appreciated! Thank you!

Jake

[dawesi]

I have to admit it's a very odd example they way they include things... another reason to use MVC...

Create a view using Ext.define, then put the view inside it.

Ext.define('FirstApp.view.SearchContainer', 
    extend: 'Ext.Conainer',
    xtype: 'searchcontainer',
    layout:'fit',
    items: [{xtype:'toolbar',docked:'top'},{xtype:'list'}]
});

then just put it into an items array using it's xtype, or add() it to a container:

items : { xtype:'searchcontainer' }

[jakeed2]

Thank you for the reply. I am with you on the first part, but modified it slightly:

Ext.define('FirstApp.view.contactTest',{
    extend: 'Ext.Container',
    xtype: 'contactTest',


    requires: [
        'Ext.data.Store',
        'Ext.List',
        'Ext.field.Search',
        'Ext.Toolbar'
    ],


    config:{
        layout:'fit',
        items: [
            {
                xtype:'searchbar',
                docked:'top',
                listeners: [{
                    scope: this,
                    clearicontap: this.onSearchClearIconTap,
                    keyup: this.onSearchKeyUp
                }]
            },
            {
                xtype:'list',
                store:'StudentStore',
                itemTpl:
                    '<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
                itemCls:'place-entry'
            }
        ]
    }
});

But you say "then just put it into an items array using it's xtype, or add() it to a container..." This is where I am having trouble. What about those functions and if statements from the example? Where do they fit in? Could you give me a in context example with code? Thanks!