1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default Scope issue

    Scope issue


    I have a panel and a function which should update the content of the panel. Inside the function there is an ajax request which should fetch the data and put in an array. Now, I want to insert that data of array into items of the panel. I tried to do this using for loop but the problem is , it didn't recognize the array and gives its length to be zero. And when I tried by putting the for loop inside the success function of ajax request, it recognized the array but failed to recognize the panel. I tried to use global variable but it also didn't work. How can I adjust the scope so that I can insert the data of array into the panel and re-render the panel after that?
    Code:
    Code:
    
    var Panel = new Ext.Panel({   id: 'pPanel',   title: 'Plots',   height: 500,   width: '70%',      layout: 'fit',   autoScroll: 'true',      items:[]  });loadcontent:function(){
    Ext.Ajax.request({ url: 'ajax', success: { var array= data is fetched and kept in this array}, failure: {failed}, scope: this,
    }); //for adding items to the panel for (var i=0; i < array.length; i++) { Panel.add( { xtype: 'component', autoEl: { tag: 'img', src: array[i], width: 700, align: 'middle' } }); };//Both of them gave an error and content wasnot loaded in the panel. Ext.getCmp('pPanel').load(array[i]); or Panel.load(array[i]);}

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,759
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Cleaned up your code a bit, this should work.
    Code:
            var Panel = new Ext.Panel({
                id: 'pPanel',
                title: 'Plots',
                height: 500,
                width: '70%',
                layout: 'fit',
                autoScroll: 'true',
                items: []
            });
            loadcontent: function () {
                Ext.Ajax.request({
                    url: 'ajax',
                    success: function(response){
                        var array = Ext.decode(response.responseText);
                        for (var i=0; i < array.length; i++) {   
                                Panel.add(   { 
                                         xtype: 'component',    
                                         autoEl: {     
                                                tag: 'img',     
                                                src: array[i],     
                                                width: 700,     
                                                align: 'middle'    
                                         }      
                                 });  
                        }
                    },
                    
                    scope: this
                });
    But it feels to me like you should use a dataview. Using multiple items in a layout fit just makes no sense.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default


    Yes, I tried to do like this but the problem is it doesn't recognize Panel when I do "Panel.add" inside the Ajax success function by saying that panel is not defined. How can I make panel accessible inside the ajax function too?

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,759
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Try cleaning up your code and posting it all here.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    0
    new2extjs is on a distinguished road

      0  

    Default


    Thanks for the reply. I tried to implement in single panel and it worked!!! But my problem is I have a hierarchy of tabpanels :

    Tabpanel 1->Tabpanel 2->Tabpanel 3
    Tabpanel 3 is inside Tabpanel 2 which is inside Tabpanel 1. I want the content to be updated in Tabpanel 3. I made another hidden panel in which I wrote the code for adding the items inside "onRender " function. But it showed nothing. But when I used
    Code:
    renderTo: Ext.getBody()
    it showed output but outside the tabpanel.
    code for hidden panel
    Code:
    Ext.define('SubPanel', {
     extend: 'Ext.Panel',
     autoScroll: 'true',
     viewBox: false,
     layout: 'auto',
      //Initializing components
     initComponent: function(){
      this.callParent(arguments); 
    },
    
    onRender: function(){
      this.callParent(arguments); 
    
    var Panel = new Ext.Panel({
                id: 'pPanel',
                title: 'Plots',
                height: 500,
                width: '70%',
                layout: 'fit',
                autoScroll: 'true',
                items: []
            });
            loadcontent: function () {
                Ext.Ajax.request({
                    url: 'ajax',
                    success: function(response){
                        var array = Ext.decode(response.responseText);
                        for (var i=0; i < array.length; i++) {   
                                Panel.add(   { 
                                         xtype: 'component',    
                                         autoEl: {     
                                                tag: 'img',     
                                                src: array[i],     
                                                width: 700,     
                                                align: 'middle'    
                                         }      
                                 });  
                        }
                    },
                    
                    scope: this
                });
    }
    Now I call it from tabpanel 3 but it fails to render the contents.
    Code:
    Ext.define('ShowTabPanel', {
     extend: 'Ext.Panel',
      layout: 'fit', 
     initComponent: function(){
      var mygraph = Ext.create('SubPanel', {});
     
      //add component to panel
      this.items = [mygraph],
      this.callParent(arguments); 
     } 
    });
    Can you plz help me in finding out what's going wrong or may be a new way to do this?

Thread Participants: 1