1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default Event on Store to trigger after data is fully loaded?

    Event on Store to trigger after data is fully loaded?


    I am trying to make a call after the data has been processed from the Store. I can't seem to find an event that gets triggered after the data is loaded and available. It seems like the load event should be the right one but it is returning all nulls. It still loads the images properly but after this call executes.

    I've also tried the render action on the DataView, and various options on the Store itself to get this to happen.

    Let me know if my strategy is right here and what I can do to fire this load after I have the data returned. Currently this load event is returning all nulls so I can't populate the lookup and populate the right panel.

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var lookup = {};
            var count = 0;
            //     Set up a model to use in our Store
            Ext.regModel('dicomImageModel', {
                fields: [
                    {name: 'dicom-image', type: 'string'}
                ]
            });
            
            var myStore = new Ext.data.Store({
                model: 'dicomImageModel',
                proxy: {
                    type: 'ajax',
                    url : '/static-images.json',
                    reader: {
                        type: 'json',
                        root: 'results'
                    }
                },
                autoLoad: true,
                load:function(ref, records, successful){
                    if(successful){
                        for(var i=0; i<records.size(); i++){
                            count++;
                            lookup[count] = records[i].url;
                        }
                        popRightPanel();
                    }else{
                        alert('Image load error.');
                    }
                }
            });
    
            var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="thumb-wrap"  style="padding:0px;"><img width="256" height="256"  style="padding:0px;" src="{dicom-image}"/></div>',
                '</tpl>'//,
            );
                  
    /*       var tapMe = new function(){
               
               
           };
    
           var toolbar1 = new Ext.Toolbar({
               dock: 'top',
               title: 'Toolbar',
               items: [{text: 'Back', ui: 'back', handler: tapMe}]
           });*/
    
            var leftPanel = new Ext.Panel({
                id:'images-view',
                width:256,
                scroll: 'vertical',
                layout:'fit',
                items: [
                    new Ext.DataView({
                    store: myStore,
                    tpl: tpl,
                    multiSelect: true,
                    overClass:'x-view-over',
                    itemSelector:'div.thumb-wrap',
                    emptyText: 'No images to display'
                })]
            });
            
            var ivTemplate = new Ext.XTemplate(
                '<div class="imageViewerDiv">',
                    '<tpl for=".">',
                        '<img src="{url}" width="512" height="512">',
                    '</tpl>',
                '</div>'
            );
            ivTemplate.compile();
            
            var switchPic= function(value){
                var ivEl = Ext.getCmp('image-viewer-place').body;
                var data = {'url':lookup[value]};
                ivTemplate.overwrite(ivEl, data);
            };
            
            var popRightPanel= function(){
                var ivp = Ext.getCmp('imageViewerPanel');
                ivp.add({
                    id: 'image-viewer-place',
                    width: 512,
                    height: 512
                });
    
                ivp.add(
                    new Ext.form.Slider({
                        id:'slider',
                        value: 1,
                        minValue: 1,
                        maxValue: count,
                        width:512,
                        drag : function(slider, thumb, value ){
                            switchPic(value);
                        }
                    })
                );
                switchPic(1);
            }
            
            var rightPanel = new Ext.Panel({
                id:'imageViewerPanel',
                flex:1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: []
            });
            
            var mainContainer = new Ext.Container({
                fullscreen: true,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [leftPanel, rightPanel]
            });
        }
    });

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    From your code above, you're overriding the load method of the store.


    like:
    Code:
    listeners: {
        load : function() {
        /*....*/
        }
    
    }

  3. #3
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default


    Thanks! That got it. Now on to the next problem = )

    Quite a learning curve with this framework.

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    its' more complex and robust than anything else on the market

  5. #5
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default


    Yeah, I really like all of the mobile specific commands.

    Let me keep my next problem inline. I'm trying to duplicate functionality similar to the Advanced DataView Example for ExtJS. Specifically the portion where I replace the picture. The image view example:

    Code:
    {
                        id: 'img-detail-panel',
                        region: 'east',
                        split: true,
                        width: 150,
                        minWidth: 150,
                        maxWidth: 250
                    }
    
        showDetails : function(){
            var selNode = this.view.getSelectedNodes();
            var detailEl = Ext.getCmp('img-detail-panel').body;
            if(selNode && selNode.length > 0){
                selNode = selNode[0];
                Ext.getCmp('ok-btn').enable();
                var data = this.lookup[selNode.id];
                detailEl.hide();
                this.detailsTemplate.overwrite(detailEl, data);
                detailEl.slideIn('l', {stopFx:true,duration:.2});
            }else{
                Ext.getCmp('ok-btn').disable();
                detailEl.update('');
            }
        },
    This makes sense to me logically. You replace the interior of this component with the new Template. I am trying to duplicate it without success:

    Code:
            var ivTemplate = new Ext.XTemplate(
                '<div class="imageViewerDiv">',
                    '<tpl for=".">',
                        '<img src="{dicom-image}" width="512" height="512">',
                    '</tpl>',
                '</div>'
            );
            ivTemplate.compile();
            
            var switchPic= function(value){
                var ivEl = Ext.getCmp('image-viewer-place');
                var data = {'dicom-image':lookup[value]};
                ivTemplate.overwrite(ivEl, data);
            };
            
            var popRightPanel= function(){
                var ivp = Ext.getCmp('imageViewerPanel');
                ivp.add({
                    id: 'image-viewer-place',
                    width: 512,
                    height: 512
                });
    
                ivp.add(
                    new Ext.form.Slider({
                        id:'slider',
                        value: 1,
                        minValue: 1,
                        maxValue: count,
                        width:512,
                        listeners:{
                            drag : function(slider, thumb, value ){
                                switchPic(value);
                            }
                        }
                    })
                );
                switchPic(1);
            }
    When I left the .body similar to the example it gave me an error because the component has no body property. Without that it gives no error, just doesn't render.

    The slider and everything get rendered properly and switchPic(1) gets called, the variables all get populated in the switchPic method, the component gets pulled properly into the IvEl but it just doesn't replace the code.

    The hosted page:
    http://173.74.123.53:8080/dicom.html

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    First rule -- do not mix Ext JS code with Sencha Touch code --- bad mojo. There is no "lookup" method for containers. Ext.fx is non-existant in the Sencha touch. Therefore, el.slideIn() is not a valid method.

    Boy i wish "Sencha Touch in action" was done.

  7. #7
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default


    Good to know. Seemed like in this case the principals made sense.

    How would you recommend accomplishing this? I need to be able to change the img src of that DIV based on the slider.

  8. #8
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default


    Should I go back to my original idea and use the carousel and not set showAnimation? The thing is the image swap needs to be really fast, like instantaneous.

  9. #9
    Ext User
    Join Date
    Oct 2010
    Posts
    21
    Vote Rating
    0
    Wakebrad is on a distinguished road

      0  

    Default


    Any suggestions here? Seems like this should be able to be accomplished.

Similar Threads

  1. Is there an event fired once a GridPanel is fully loaded with data?
    By LambyPie in forum Ext 3.x: Help & Discussion
    Replies: 15
    Last Post: 3 Dec 2009, 9:07 AM
  2. [RESOLVED] Combo store loads when trigger pressed -even when store is loaded!
    By dlgoodchild in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Aug 2009, 1:46 PM
  3. Trigger event when image is fully loaded?
    By mherger in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 15 Jul 2008, 1:18 PM
  4. Tree fully loaded event?
    By Kannabismus in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Nov 2007, 2:28 AM
  5. Click event before fully loaded - 1.0.1a
    By MarkT in forum Ext 1.x: Bugs
    Replies: 13
    Last Post: 16 Jul 2007, 12:50 PM

Thread Participants: 1