1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    46
    Answers
    1
    Vote Rating
    3
    gfrancis1@gmail.com is on a distinguished road

      0  

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

    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
    46
    Answers
    1
    Vote Rating
    3
    gfrancis1@gmail.com is on a distinguished road

      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
    46
    Answers
    1
    Vote Rating
    3
    gfrancis1@gmail.com is on a distinguished road

      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,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      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.

Thread Participants: 1

Tags for this Thread