Results 1 to 4 of 4

Thread: How to extend a Ext.data.Store with constructor

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Answers
    1
    Vote Rating
    3
      0  

    Default Answered: How to extend a Ext.data.Store with constructor

    Hi,
    I'm trying to subclass the Ext.data.Store as follows:
    Code:
    Ext.define('SPVStore', {
        extend: 'Ext.data.Store',
        proxy : {
            type : 'ajax',
            url : '.im.read',
            extraParams:[{type:'SourcePropertyValue', source_propertytype_id: 1}],
            reader : {
                type : 'json',
                root : 'item'
            }
        },
        model:'SourcePropertyValue',
        initComponent : function() {
            alert(3);
        }
    });
    and then use it as:
    Code:
            edit = new Ext.form.ComboBox({ 
                store: new SPVStore(),                
                displayField:'value_desc',
    ...
    but when call edit.store.load() I get no return values (server is not hit) and no error, and also the alert(3) (in the subclass Constructor) is not being called. I have a feeling there may be a few things wrong with how I'm doing this and I'd really appreciate some guidance.
    Thanks,

  2. It is not correct to call initComponent the constructor, they are two different things. initComponent is a template method provided for initializing a component. It is called by the actual constructor and is never passed any arguments. The constructor will copy all of the properties in the config object onto this and initComponent is expected to get all the information it needs by reading the properties on this.

    Further, initComponent only exists for components. A store is not a component. You would need to override constructor instead.

    Adding a property foo to this won't result in it being in your extraParams. At the point you're defining the extraParams the value of this is probably the global window object, so that parameter will just be undefined (hence what you're seeing at your server). What you've got at the moment is equivalent to the following:

    Code:
    var param = this.foo;
    
    Ext.define('SPVStore', {
        ...
        proxy : {
            ...
            extraParams: {..., source_propertytype_id: param},
            ...
        },
        ...
    });
    Clearly this will not be the instance of SPVStore.

    There are several ways to achieve a result similar to the one you're looking for. Here's one:

    Code:
    Ext.define('SPVStore', {
        extend: 'Ext.data.Store',
    
        model: 'SourcePropertyValue',
    
        proxy : {
            type : 'ajax',
            url : '.im.read?',
            reader : {
                root : 'item',
                type : 'json'
            }
        },
    
        constructor: function() {
            this.callParent(arguments);
    
            this.getProxy().extraParams = {
                source_propertytype_id: this.foo,
                type: 'SourcePropertyValue'
            };
        }
    });
    
    ...
    
    new SPVStore({foo: 4});
    Note I haven't actually tested this code, it may need a little tweaking.

  3. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Answers
    1
    Vote Rating
    3
      0  

    Default

    ok so I have figured out why the records weren't returning.
    so the only question I have now is how to define a constructor on my Ext.data.Store subclass, and call that constructor with an argument?

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Answers
    1
    Vote Rating
    3
      0  

    Default

    this might clarify what I'm trying to do, but doesn't work; i.e the value "" is being sent back to the server for 'foo' instead of 4:

    Code:
    Ext.define('SPVStore', {
        extend: 'Ext.data.Store',
        proxy : {
            type : 'ajax',
            url : '.im.read?',
            extraParams:{type:'SourcePropertyValue',source_propertytype_id: this.foo},
            reader : {
                type : 'json',
                root : 'item'
            }
        },
        model:'SourcePropertyValue',
        initComponent : function(foo) {
            this.foo = foo;
        }
    });
    Code:
            edit = new Ext.form.ComboBox({ 
                store:  new SPVStore(4),

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,790
    Answers
    583
    Vote Rating
    391
      0  

    Default

    It is not correct to call initComponent the constructor, they are two different things. initComponent is a template method provided for initializing a component. It is called by the actual constructor and is never passed any arguments. The constructor will copy all of the properties in the config object onto this and initComponent is expected to get all the information it needs by reading the properties on this.

    Further, initComponent only exists for components. A store is not a component. You would need to override constructor instead.

    Adding a property foo to this won't result in it being in your extraParams. At the point you're defining the extraParams the value of this is probably the global window object, so that parameter will just be undefined (hence what you're seeing at your server). What you've got at the moment is equivalent to the following:

    Code:
    var param = this.foo;
    
    Ext.define('SPVStore', {
        ...
        proxy : {
            ...
            extraParams: {..., source_propertytype_id: param},
            ...
        },
        ...
    });
    Clearly this will not be the instance of SPVStore.

    There are several ways to achieve a result similar to the one you're looking for. Here's one:

    Code:
    Ext.define('SPVStore', {
        extend: 'Ext.data.Store',
    
        model: 'SourcePropertyValue',
    
        proxy : {
            type : 'ajax',
            url : '.im.read?',
            reader : {
                root : 'item',
                type : 'json'
            }
        },
    
        constructor: function() {
            this.callParent(arguments);
    
            this.getProxy().extraParams = {
                source_propertytype_id: this.foo,
                type: 'SourcePropertyValue'
            };
        }
    });
    
    ...
    
    new SPVStore({foo: 4});
    Note I haven't actually tested this code, it may need a little tweaking.

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
  •