Results 1 to 6 of 6

Thread: Looping with Xtemplate

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33

    Default Looping with Xtemplate

    Hi,
    Please, i need help, on my app i want to loop through the record on my database, i want each record wrapped in a separate Xtemplate as it loops.
    This is my code, it's not working...
    My Model
    Code:
             {name: 'img',   type: 'string'},
            {name: 'description',        type: 'string'},
    My Store
    Code:
      Ext.create('Ext.data.Store', {
            storeId : 'myStore',
            model    : 'dataModel',
            result : [
                { img: '<img src="Com/Views/images/setraco.gif" width="50" height="50">', description:'Our services still beats competitors imaginations.<br>We are good at what we do, that makes us the best'},
                { img: '<img src="Com/Views/images/farm.jpg" width="50" height="50">', description:'So fresh, So natural, So tasty....'},
                { img: '<img src="Com/Views/images/oando.jpg" width="50" height="50">', description:'We bring it right to your doorstep'}
            ],
    });
    My Xtemplate
    Code:
    var tpl = new Ext.XTemplate(
            '<tpl for=".">',
    
                '<tpl if="count &gt; 0">',
                    '<table class="table1" style="border: 1px solid black">',
                        '<tpl for="result">',
                            '<tr>',
                                    '<td>{img}</td>',
                                    '<td>{description}</td>',
                            '</tr>',
                        '</tpl>',
                    '</table>',
                '</tpl>',
    
            '</tpl>'
        );
    Thanks.
    Pat.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Please post in the appropriate forum, we have to keep moving your threads for you.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33

    Default

    Maybe i don't know the appropriate forum to make my post. I will be grateful if you can direct me.
    Thanks.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Quote Originally Posted by Pat Emi View Post
    Maybe i don't know the appropriate forum to make my post. I will be grateful if you can direct me.
    Thanks.
    Look at where your threads are. If you are asking a question regarding Ext JS 4, then the Ext JS 4 Q&A forum is the appropriate forum.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    I think you need to change the tpl structure according to the store.
    Also replace the result config of the store by data.
    Review the following code:

    Code:
    Ext.define('dataModel', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'img',   type: 'string'},
           {name: 'description',        type: 'string'}
        ]
    });
    
    
    Ext.create('Ext.data.Store', {
    	id : 'myStore',
    	model    : 'dataModel',
        data: [
    		{ img: '<img src="Com/Views/images/setraco.gif" width="50" height="50">', description:'Our services '},
    		{ img: '<img src="Com/Views/images/farm.jpg" width="50" height="50">', description:'So fresh, So natural, So tasty....'},
    		{ img: '<img src="Com/Views/images/oando.jpg" width="50" height="50">', description:'We bring it right to your doorstep'}
    	]
    });
    
    
    var imageTpl = new Ext.XTemplate(
       '<table class="table1" style="border: 1px solid black">',
    	   '<tpl for=".">',
    			'<tr>',
    				'<td>{img}</td>',
    				'<td>{description}</td>',
    			'</tr>',
            '</tpl>',
    	'</table>'
    );
    
    
    Ext.create('Ext.view.View', {
        store: Ext.data.StoreManager.lookup('myStore'),
        tpl: imageTpl,
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images available',
        renderTo: Ext.getBody()
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33

    Default

    @Sword-it,
    Thanks for the correction, but i'm yet to get what i really want.

    I want each record to be on a separate xtemplate not grouped into one xtemplate. Something that looks more like a gallery.

    Each record is going to have a checkbox for selection and deselection, and a mouseover effect.

    Thanks in advance.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •