Results 1 to 5 of 5

Thread: Simple StoreBinding

  1. #1

    Default Answered: Simple StoreBinding

    Hi there,
    maybe I'm on the wrong track, but I'm looking for a way to get binding to a store working.
    With this code nothing is displayed:
    Code:
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: ['name'],
        proxy: {
            type: 'ajax',
            url: 'users.json',
            rootProperty: 'users'
           
        }
    });
    
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
            var id = 1;
            
            var component = new Ext.Component({
                renderTo: Ext.getBody(),
                viewModel: {
                    stores:{
                        test: {
                           model: 'User',
                             autoLoad: true
                        }
                    }
                },
                bind: '{test.name}'
            });
        }
    });
    and that is the simple users.json:
    Code:
    { "users": [ { "id": 1, "name": "Foo" },  { "id": 2, "name": "Bar" } ]}
    See it on fiddle: https://fiddle.sencha.com/#fiddle/1eed

    What I'm doing wrong? Or is a Store not designed, to work as binding source?

  2. Check out the dataview class.


  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    A store is a collection of records. It doesn't make sense to bind to the "name" of a store.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3

    Default

    Thanks evant!I know that, but what is the best way to bind to the records from a store? In a grid panel I can bind to a store and access fields of it's records with dataindex. But how can this be achieved i.e. for template items in a panel?

    Something like this:

    Code:
    items: [{
                xtype: 'panel',
                viewModel: {
                  type: 'maindeskfavorite'
                },
                title: 'Favorites',
                tpl: [
                    '<tpl for=".">',
                    '<div style="margin-bottom: 10px; text-align:center;" class="icon-wrap">',
                    '<img src="{favoriteStore.icon}" />',
                    '<br/><span>{favoriteStore.name}</span>',
                    '</div>',
                    '</tpl>'
                ],
                maxHeight: 150,
                collapsed: true,
    
    
    
    
            },

  5. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    Check out the dataview class.

    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #5

    Default

    Tanks evant, with dataview class the binding to a store works well.

    I had a similar construct with binding to data in a viewmodel and that worked well. So I supposed that binding to a store could be the same.

    This is the working 'data' item in my solution:

    Code:
    {
                xtype: 'panel',
                title: 'All',
                tpl: [
                    '<tpl for=".">',
                    '<div style="margin-bottom: 10px; text-align:center;" class="icon-wrap">',
                    '<img src="{icon}" />',
                    '<br/><span>{name}</span>',
                    '</div>',
                    '</tpl>'
                ],
                bind: {
                    data: '{icons}'
                },
                listeners: {
                    click: 'onMainDeskItemClick',
                    element: 'el',
                    delegate: 'div.icon-wrap',
                    contextmenu: 'onContextMenu'
                },
                scrollable: true,
                autoRender: true,
                collapsed: false,
    
    
            }
    Just a hypothetical idea: Would it be possible to bind a store to the data section in a viewmodel and work with the data as in the code above?

    It's just a proposal, but maybe it's worth to think about it.

    Thank you for your assistance!

Similar Threads

  1. Replies: 1
    Last Post: 20 Jan 2015, 6:01 AM
  2. simple app - just not seeing what I don't see
    By chriskuhn in forum Ext: Q&A
    Replies: 2
    Last Post: 17 Sep 2012, 5:12 PM
  3. So simple, but i simple dont get it. How to refresh tree?
    By Kadifo in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 22 Jul 2010, 11:18 PM
  4. Very noob question: Creating a simple form, very simple form with designer
    By altamirador in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 27 May 2010, 5:16 AM
  5. Help with simple ui
    By Trio87 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 23 Apr 2010, 3:23 AM

Tags for this Thread

Posting Permissions

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