View Full Version : Store class setup

25 Feb 2012, 6:53 PM
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:

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:

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

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

Ext.define('CI.store.Contacts', {
extend: 'Ext.data.Store',
model: 'CI.model.Contact',

autoLoad: false,
constructor : function (config){
this.listeners = {
'beforeload' : function(){
// 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:

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???

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

26 Feb 2012, 8:00 AM
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
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.

26 Feb 2012, 11:12 AM
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.

27 Feb 2012, 9:38 AM
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:

var newModelInstance = someStoreInstance.model.create();

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

newModelInstance.set('someFieldname', someValue);