Results 1 to 4 of 4

Thread: Store class setup

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
      0  

    Default Store class setup

    Ok, I keep getting to a certain point with ExtJS and thinking I'm getting a handle on it. I discover stuff in the docs, and go, "ahhhh...that would be useful....I'll have to try that"....etc etc.

    And yet, I keep having the realization that I really have no clue what is going on.

    Here is an example:

    Code:
    Ext.define('CI.store.Contacts', {
        extend: 'Ext.data.Store',
        model: 'CI.model.Contact',
        autoLoad: false
    });
    Ok, so that was easy. I created a store...and I can now load it, pass params to it in the load, sync, add new records etc etc... basically all the basics.

    Then, I wanted a way to create a new instance of the model defined in the store.
    newMod = Ext.create('CI.model.Contact'); is easy enough.

    But in my case, I wanted to do this without 'knowing' the model id.

    So I searched for ways to get the model name (as defined in the store)...from a reference to the store.
    I saw myStore.getModel(); mentioned somewhere but couldn't find it in the docs.
    Then, I read that if you use the "config" object, the class would generate the getter automatically.

    So my code became:

    Code:
    Ext.define('CI.store.Contacts', {
        extend: 'Ext.data.Store',
        config:{model : 'CI.model.Contact'},
        autoLoad: false
    });
    But still no getModel() method appeared magically. Then I starting blinding trying various attempts with constructor, init, etc functions in my class.... and got even more confused. What exactly was happening= no clue! Read the docs= get more confused.

    Recently, I wanted to add a beforeload event listener to my store class.

    Do you think I could get that to work? negative.

    I tried
    Code:
    Ext.define('CI.store.Contacts', {
        extend: 'Ext.data.Store',
        model: 'CI.model.Contact',
        listeners: {
            'beforeload':  function(){
                  alert('hi, I'm about to load something');
            }
       },
        autoLoad: false
    });
    I tried

    Code:
    Ext.define('CI.store.Contacts', {
        extend: 'Ext.data.Store',
        model: 'CI.model.Contact',
    
        autoLoad: false,
        constructor : function (config){
               this.listeners = {
                    'beforeload' : function(){
                          alert('hi');
                    }
               }
              // and also tried various incarnations of this.callParent()  ie callParent(config), callParent(args), tried using it before my listeners and after.
        }
    });
    And several other variations, including putting the listeners thingy in my config object.... etc etc

    My app always loads, and I get no errors.
    My store loads on command, and the records gracefully populate the correct grid... so there aren't any js errors (although there may be in my above code, because I quickly typed it in on the fly).

    Maybe (likely) this is because I'm new to javascript in general. But I've usually been able to get the results I want using some logic, and some perseverance ...and eventually I start to get a solid understanding of how and why something works. My recent days with ExtJS have not given me any confidence that I know what I'm doing.

    Some direct questions to those who DO get it:

    1. What is correct (and most complete) to define a class which extends another class? ie the Models, Views, Stores, Controllers that make up the MVC system as shown in various guides and tutorials (which understandably never seem to show anything other than the most basic illustrations).
    2. For number 1, please include where to put event listeners, where to add new functions, how and why to use the various methods of configuring the class, how to get the so-called-automatically generated "getters" and "setters" to work...and what information they are limited to.

    If this is just too much work, or too impossible... are there CURRENT guides and tutorials somewhere that give a more full understanding?

    What I (and no doubt others) would love to see is something like this:

    Code:
    Ext.define('CI.store.Contacts', {    // the name of the new class  (see page xxx for more)
        extend: 'Ext.data.Store',  // the name of the class you are extending
        
        //  begin configuring some properties for this class
        //     these will (override/not override?) existing/default properties defined in the class you are extending (and its parent...)////   <<-- this is probably not correct...but I don't know
    
        configProperty:  propertyValue,   //--- see (link)  for a list of all properties you may configure for a class
        configProperty:  propertyValue,   // which is based on the class you are extending
        configProperty:  propertyValue,
        configProperty:  propertyValue,
    
    
        // special config object .... it is used for....(?)..... it does ....(?)... you should use it when ....(?).... you should not use it when (?).... etc etc
        //  what is cool about this is that it does xxx and yyy???
        
        config:{
                property: value,   // see (link)  for a list of properties you can config using this method
                property: value
        },
        
       // constructor:    it is used for xxx
       /// it does xxx
        //it doesn't do xxx
        //  it only applies to xxx etc etc
    
        constructor (config){   // this function is call when an instance of this class is created.
                 ///   here you can do stuff like x, y, and z
                ///     you can not do stuff like a, b, and c..... because of d, e and f
                //    You should/shouldn't also do xxx before-and-or-after ////  (ie callParent?)
    
        },// end of constructor
        
        /// and same for init,  initComponent, initConfig, and where to put events etc.
    });
    I realize that not all classes have the same methods.... but surely it must be possible to at least break the classes into a few distinct categories, and give the 80/20 rules.

    ie Extend a Component, Extend a non-component, Extend a util..... etc

    Sorry if this sounds like a rant. I have a tyrannosaurus-sized ego, and it doesn't deal well with the realization that I suck at Ext JS.

    (PS... I have a non-programming day-job.... so I'm mostly a hobbyist, however I have a few successful commercial applications out in the real world: some PHP, MySql, Javascript stuff (strickly web 1.0).... and a couple multiuser desktop applications written in MS Access, Visual Basic etc.)

    Thanks for the time. I'm sure ExtJs is the cat's bum... But I'm spending too much time in the litter box

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Answers
    13
    Vote Rating
    10
      0  

    Default

    welcome to extjs :d
    first dont waste time asking for better documentation, there 22342847 post bout that.
    if theres no documentation for that you are looking for, ask in the forum or better look at the source code, source code is the best way to understand what can be done and how. its sad but its the reality.

    second, to know if theres any "magically" created method as you said, use a browser debuggin tool, like firefug in firefox (i use chrome and its developers tools), while programming is javascript these tools are goin to be your best friend. there you can do
    console.log(someObject)
    and this will display all attributes and methods that your current object has, there you can check all the "magically" created method (or if they arent there)

    just an example
    using console.log(someObject) ull see the attributes defined to that object and maybe ull see
    myObject.model = "CI.model.Contact"
    and then in javascript u can do myObject.model to get the model name, maybe wont be the best way but its a way, and its goin to work till u find "the right way to get model name". im not saying theres a .model attribute, just saying in case u cant find a way to get something, try printing the whole object to check its attributes and figure how to get it till you find the right way to that.

    this things will help you alot while working with aspect of ExtJs, instead of waiting better documentation or a forum asnwer.

    sorry for my bad english.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
      0  

    Default

    Thanks for the reply. I use chrome and it's dev tools already.

    My problem isn't really finding out what's in an object, it's in finding the correct way to put things in to the object when the object is a ext class extended from another ext class.

  4. #4
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
      0  

    Default

    Regarding your initial question about getting a model from a store and not needing to know the Model's custom class name, you can generically create a model instance from an Ext.data.Store as shown below:

    Code:
    var newModelInstance = someStoreInstance.model.create();

    You can then set values on the model instance, etc.:

    Code:
     newModelInstance.set('someFieldname', someValue);
    Last edited by friend; 27 Feb 2012 at 11:26 AM. Reason: clarity

Posting Permissions

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