1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    8
    Vote Rating
    0
    jakeed2 is on a distinguished road

      0  

    Default Unanswered: How to open Search List example in new view?

    Unanswered: How to open Search List example in new view?


    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:
    Code:
    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:
    Code:
    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
    Last edited by jakeed2; 8 Oct 2012 at 7:11 AM. Reason: improved question

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Answers
    24
    Vote Rating
    41
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    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.

    Code:
    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:

    Code:
    items : { xtype:'searchcontainer' }
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    8
    Vote Rating
    0
    jakeed2 is on a distinguished road

      0  

    Default


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


    Code:
    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!

Thread Participants: 1

Tags for this Thread