Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    kmc is on a distinguished road

      0  

    Default Answered: Nested (associated) models and data stores in nested DataViews

    Answered: Nested (associated) models and data stores in nested DataViews


    Hi all. I tried posting this on Stack Overflow as it is my go-to answer source, but not getting any love there, so I thought I'd try here.

    I hardly even know how to ask this one, but here goes.

    I have two models, a Platter which contains many Recipes:


    Code:
    Ext.define('NC.model.Platter', {
      extend: 'Ext.data.Model',
      config: {
        fields: [
          { name: 'name', type: 'string' },
          { name: 'text', type: 'string' }
        ],
        associations: [
          {type: 'hasMany', model: 'NC.model.Recipe', name: 'recipes', filterProperty: 'text'}
        ]
      }
    });
    
    
    Ext.define('NC.model.Recipe', {
      extend: 'Ext.data.Model',
      config: {
          fields: [
            { name: 'name', type: 'string' },
            { name: 'image', type: 'string' },
            { name: 'stepsText', type: 'string', mapping: 'properties.preparationText' },
            { name: 'ingredientsText', type: 'string', mapping: 'properties.ingredientsText' }
          ]
        }
    });
    Platters are basically different filters on an online recipe store. So I might have a thousand recipes but my 'Pizza' platter will only return pizza recipes (thus the filterProperty). Platters are just created and stored locally, whereas Recipes are online. So, the stores:



    Code:
    Ext.define('NC.store.Platters', {
      extend: 'Ext.data.Store',
    
    
      config: {
        model: 'NC.model.Platter',
        storeId: 'Platters',
        proxy: {
          type: 'localstorage',
          id: 'platters'
        },
        data : [
            {name: 'Noodles', text: 'noodle'},
            {name: 'Baked', text: 'bake'},
            {name: 'Pizza', text: 'pizza'}
        ]
      }
    });
    
    
    Ext.define('NC.store.Recipes', {
      extend: 'Ext.data.Store',
    
    
      config: {
        model: 'NC.model.Recipe',
        storeId: 'Recipes',
        proxy: {
          type: 'jsonp',
          url: 'xxxx',  // url here (redacted)
          callbackKey: 'callback',
          filterParam: 'text',
          extraParams: {
            // credentials and tokens here (redacted)
          },
          reader: {
            type: 'json',
            idProperty: 'uuid',
          }
        }
      }
    });

    Now, I would like to create a dataview of dataviews. A list of Platters, each containing it's list of Recipes:



    Code:
    Ext.define('NC.view.DiscoverGrid', {
      extend: 'Ext.DataView',
      xtype: 'discovergrid',
      id: 'discover',
    
    
      config: {
        title: 'Discover',
        baseCls: '',
        useComponents: true,
        defaultType: 'platter',
        store: 'Platters',
        ui: 'light'
      }
    });
    
    
    Ext.define('NC.view.Platter', {
        extend: 'Ext.dataview.component.DataItem',
        xtype: 'platter',
    
    
        config: {
          layout: 'fit',
          height: '100px',
          list: {
            itemTpl: '{name}',
            inline: true,
            scrollable: {
              direction: 'horizontal',
              directionLock: true
            }
          },
          dataMap: {
            getList: {
              setData: 'recipes'
            }
          }
        },
    
    
        applyList: function(config) {
          return Ext.factory(config, Ext.DataView, this.getList());
        },
    
    
        updateList: function(newList, oldList) {
          if (newList) {
            this.add(newList);
          }
    
    
          if (oldList) {
            this.remove(oldList);
          }
        }
    });

    Now, how do I populate the platter's recipes? If I populate the Platters with a little in-line recipe data like, so:



    Code:
    data : [
        {name: 'Noodles', text: 'noodle', recipes: [
          { name: 'Pasta', ingredientsText: "Tomatoes\nPassata\n1tsp Oregano", preparationText: "Do something\nAdd passata\nmix in oregano and tomato",
            ingredients: [{ text: "bla"}]
          }
        ]},
        {name: 'Baked', text: 'bake'},
        {name: 'Pizza', text: 'pizza'}
    ]

    ... it works straight out and renders the dataview with Pasta in it. So I just need to know how to get my platters to fill their recipe data. Where (I assume in a controller on an initialize event of some sort) and how do I wire this up? And am I using the filterProperty correctly? I don't completely understand the docs on this, but I think it generally filters on a foreign key, which I don't have, and that the filterProperty overrides this. So that the URL will have &text=noodle appended to it.

    Thanks in advance.

  2. Thanks for your help bluehipy, but what I ended up doing was make my DataItems an extended data list and create the store directly on that class. So:

    Code:
    Ext.define('NC.view.PlatterDataItem', {
      extend: 'Ext.dataview.component.DataItem',
      xtype: 'platterdataitem',
    
    
      config: {
        layout: 'vbox',
        height: '130px',
        cls: 'platter',
        list: {
        },
        dataMap: {
          getList: {
            setRecipeFilters: 'text'
          }
        }
      },
      
      applyList: function(config) {
        return Ext.factory(config, NC.view.Platter, this.getList());
      },
     
      updateList: function(newList, oldList) {
        if (newList) {
          this.add(newList);
        }
    
    
        if (oldList) {
          this.remove(oldList);
        }
      }
    });
    
    Ext.define('NC.view.Platter', {
      extend: 'Ext.DataView',
      xtype: 'platter',
    
    
      config: {
        layout: 'vbox',
        height: '130px',
        itemCls: 'platter-item',
        itemTpl:  '<div class="thumb"><tpl if="image != null"><img src="{image}" /></tpl></div>'+
                  '<div class="name">{name}</div>',
        inline: {
          wrap: false
        },
        scrollable: {
          direction: 'horizontal',
          directionLock: true
        }
      },
      
      setRecipeFilters: function(text) {
        var store = Ext.create('Ext.data.Store', {
          model: 'NC.model.Recipe',
          autoLoad: true,
          proxy: {
            type: 'jsonp',
            url: 'xxxxx',
            callbackKey: 'callback',
            extraParams: {
              // credentials & text filter param
            },
            reader: {
              type: 'json',
              idProperty: 'uuid',
            }
          }
        });
        
        this.setStore(store);
      }
    });
    I don't know if that's the greatest solution, but it works, so I hope that helps someone else.

  3. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    I think here:
    idProperty: 'uuid'
    you wanted to write:
    identifier: 'uuid'

    As on the platter's recipes:

    Code:
    var platter = store.getAt(x);
    
    plater.receipes().add({....});
    
    plater.receipes().sync();

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    kmc is on a distinguished road

      0  

    Default


    Thanks for the reply bluehipy, but I don't think the identifier property is my problem. That's just for generation of ids. From the docs:
    The identifier strategy used when creating new instances of this Model that don't have an id defined. By default this uses the simple identifier strategy that generates id's like 'ext-record-12'. If you are saving these records in localstorage using a LocalStorage proxy you need to ensure that this identifier strategy is set to something that always generates unique id's. We provide one strategy by default that generates these unique id's which is the uuid strategy.

    I changed some things and I'm closer to what I'm trying to achieve. My Platter model now looks like this:

    Code:
    Ext.define('NC.model.Platter', {
      extend: 'Ext.data.Model',
      config: {
        fields: [
          { name: 'name', type: 'string' },
          { name: 'text', type: 'string' }
        ],
        associations: [
          { type: 'hasMany', model: 'NC.model.Recipe', name: 'recipes',
            store: {
              model: 'NC.model.Recipe',
              proxy: {
                type: 'jsonp',
                url: 'xxxx',
                callbackKey: 'callback',
                filterParam: null,
                extraParams: {
                  // credentials here
                },
                reader: {
                  type: 'json',
                  idProperty: 'uuid',
                }
              }
            }
          }
        ]
      }
    });
    It basically replicates the Recipe store proper. It is kind of strange that I have a perfectly formed Recipe store sitting there but I can't use it automatically to define the stores in my recipe associations. But moving on...

    To test it I just do this in app.js:
    Code:
    Ext.getStore('Platters').getAt(0).recipes().load({ params: {text: 'pizza'}, callback: function(records, operation, success) {
              console.log(records);
            } } );
    This actually loads the recipes, quite delightfully! Now my problem is to get the Platter view to update with this data. I tried to set an updatedata listener on the list component of the platter dataItem, but that doesn't fire.

    Code:
    Ext.define('NC.view.Platter', {
      extend: 'Ext.dataview.component.DataItem',
      xtype: 'platter',
    
    
      config: {
        layout: 'fit',
        height: '100px',
        list: {
          itemTpl: '{name}',
          inline: true,
          scrollable: {
            direction: 'horizontal',
            directionLock: true
          }
        },
        dataMap: {
          getList: {
            setData: 'recipes'
          }
        }
      },
      
      initialize: function() {
        this.callParent();
    
    
        this.getList().on('updatedata', function(list, newData, eOpts) {
          list.refresh();
        });
      },
      
      applyList: function(config) {
        return Ext.factory(config, Ext.DataView, this.getList());
      },
     
      updateList: function(newList, oldList) {
        if (newList) {
          this.add(newList);
        }
    
        if (oldList) {
          this.remove(oldList);
        }
      }
    })
    Any ideas how to get the platter view to update?

    Any other comments on the structure of everything is welcome - I feel that I am fumbling about with these associations and models and stores. Ta.

  5. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    1) Problem is that your model has:
    Code:
    fields: [
            { name: 'name', type: 'string' },
            { name: 'image', type: 'string' },
            { name: 'stepsText', type: 'string', mapping: 'properties.preparationText' },
            { name: 'ingredientsText', type: 'string', mapping: 'properties.ingredientsText' }
          ]
    and in the reader you are specifying
    Code:
     reader: {
                  type: 'json',
                  idProperty: 'uuid', // <<<< this comma should not be here!
                }
    There is no field 'uuid' in your model and idProperty means:
    "Name of the property within a row object that contains a record identifier value. Defaults to The id of the model. If an idProperty is explicitly specified it will override that of the one specified on the model"


    2) You are passing in your DataItem datamap, the receipes to the list, but receipes is not an array but a store, if I understand correctly your model.

    Maybe :
    Code:
    datamap:{
    getList:{
      setStore:'receipes'
    }
    }

    3) on the association definition, autoLoad:true might help you not calling load manually
    Last edited by bluehipy; 25 May 2012 at 6:50 AM. Reason: extra info

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    kmc is on a distinguished road

      0  

    Default


    Thanks for your help bluehipy, but what I ended up doing was make my DataItems an extended data list and create the store directly on that class. So:

    Code:
    Ext.define('NC.view.PlatterDataItem', {
      extend: 'Ext.dataview.component.DataItem',
      xtype: 'platterdataitem',
    
    
      config: {
        layout: 'vbox',
        height: '130px',
        cls: 'platter',
        list: {
        },
        dataMap: {
          getList: {
            setRecipeFilters: 'text'
          }
        }
      },
      
      applyList: function(config) {
        return Ext.factory(config, NC.view.Platter, this.getList());
      },
     
      updateList: function(newList, oldList) {
        if (newList) {
          this.add(newList);
        }
    
    
        if (oldList) {
          this.remove(oldList);
        }
      }
    });
    
    Ext.define('NC.view.Platter', {
      extend: 'Ext.DataView',
      xtype: 'platter',
    
    
      config: {
        layout: 'vbox',
        height: '130px',
        itemCls: 'platter-item',
        itemTpl:  '<div class="thumb"><tpl if="image != null"><img src="{image}" /></tpl></div>'+
                  '<div class="name">{name}</div>',
        inline: {
          wrap: false
        },
        scrollable: {
          direction: 'horizontal',
          directionLock: true
        }
      },
      
      setRecipeFilters: function(text) {
        var store = Ext.create('Ext.data.Store', {
          model: 'NC.model.Recipe',
          autoLoad: true,
          proxy: {
            type: 'jsonp',
            url: 'xxxxx',
            callbackKey: 'callback',
            extraParams: {
              // credentials & text filter param
            },
            reader: {
              type: 'json',
              idProperty: 'uuid',
            }
          }
        });
        
        this.setStore(store);
      }
    });
    I don't know if that's the greatest solution, but it works, so I hope that helps someone else.

  7. #6
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    If it works for you then it is ok. You are re-doing it by hand what model association do behind the scene

Thread Participants: 1

Tags for this Thread