Results 1 to 7 of 7

Thread: [SOLVED] Manipulating a DataView on store update

  1. #1
    Ext JS Premium Member n3rd's Avatar
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    72

    Thumbs up [SOLVED] Manipulating a DataView on store update

    Hello,

    I'm trying to manipulate the DOM of a DataView created by an XTemplate. The manipulation is currently triggered by the store's update event. However, it seems like at that point in time, the dataview has not yet been re-rendered. As a consequence of that, the manipulations (in my case just a few simple effects) fail.

    I can think of a number of hacky ways to get around this, but I was wondering what the best practice is for handling this kind of problem - or did I miss something entirely?

    Any thoughts?

    Here's the code to reproduce the problem:
    PHP Code:
    var tpl = new Ext.XTemplate(
        
    '<tpl for=".">',
            
    '<div class="dataEl" data-myid="{id}">{id}: {value}</div>',
        
    '</tpl>'
    );

    var 
    store = new Ext.data.ArrayStore({
        
    autoDestroytrue,
        
    storeId'myStore',
        
    idIndex0,
        
    data: [
            [
    42'Bar'12], [13'Baz'13.42], [7'Boo', -4]
        ],  
        
    fields: [
           {
    name'id'type'int'},
           {
    name'foo'type'string'},
           {
    name'value'type'float'}
        ]
    });

    MyPlugin Ext.extend(Object, {
        
    dataViewnull,

        
    constructor: function () {
            
    MyPlugin.superclass.constructor.call(this);
        },

        
    init: function (dataView) {
           
    this.dataView dataView;

           
    this.dataView.getStore().on({
               
    scopethis,
               
    updatethis.onStoreUpdate
           
    });
        },

        
    onValueChanged: function (record) {
            var 
    el this.dataView.getEl().child('[@data-myid="' record.get('id') + '"]'true);

            
    // at this point, 'el' references an object that is not in the DOM
            
    console.debug(el);
        },

        
    onStoreUpdate: function (storerecordoperation) {
            if (
    operation === Ext.data.Record.EDIT && Ext.isDefined(record.modified.value)) {
                
    this.onValueChanged(record);
            }
        }
    });

    Ext.onReady(function() {
        var 
    dataView = new Ext.DataView({
           
    renderTo'content',
           
    tpltpl,
           
    itemSelector'.dataEl',
           
    storestore,
           
    plugins: [new MyPlugin()]
        });

        
    // manipulate an element in the store
        
    var record store.getById(42);
        
    record.beginEdit();
        
    record.set('value'123.45);
        
    record.set('foo''new foo');
        
    record.endEdit();
    }); 

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    The dataview will refresh itself whenever the Store changes.

  3. #3
    Ext JS Premium Member n3rd's Avatar
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    72

    Default

    Yes, I know that. However, I want to do some additional stuff from outside the template. For instance, I want to add some effects whenever a numeric value changes based on whether it has gone up or down. And I want to do this without cluttering the XTemplate with <tpl:if>s and such. A DataView-plugin that reacts to the store's update events seemed to be the most logical place for me to do that. Alas, I ran into the problem described above.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Delay the handler call using the delay option.

    And then use http://www.extjs.com/deploy/dev/docs...member=getNode to get the node from the Record.

  5. #5
    Ext JS Premium Member n3rd's Avatar
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    72

    Default

    Okay thanks, that does the trick. Although I would still file this approach under "hacky". Simply waiting for a certain intervak hoping that the DOM will be available in time just doesn't feel particularly clean :-/

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    It's the order in which events are fired. The update event fires before the datachanged event (or whatever event gets fired after update).

    Using delay, just means you get the handler function call after.

  7. #7
    Ext JS Premium Member n3rd's Avatar
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    72

    Default

    Fair enough. I guess it's only half hacky then :)

    Thanks a bunch, it's all peachy now.

Similar Threads

  1. Dataview has error on store record update.
    By daniel6161 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 15 Jul 2011, 12:21 PM
  2. dataview real time update
    By wp.joju in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 Feb 2010, 9:21 PM
  3. dataView does not update after .load of underlying store
    By hobbes in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 9 Oct 2008, 11:15 AM
  4. Chaging DataView to update chagned store data?
    By TheBuzzer in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 8 Sep 2008, 2:15 PM
  5. [SOLVED]Grid RowSelectionModel doesn't update selections on store update
    By MaximGB in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 11 Jul 2007, 3:41 AM

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
  •