Displaying results in one tab panel as output of operation in another tab panel

**new2extjs** · 21 Sep 2011 4:49 AM

Thanks for the reply
I tried using anchor layout and also did filterPanel.doLayout();

But still the newly added item remained invisible.

Is there any other way?

**mberrie** · 21 Sep 2011 4:55 AM

Post your latest code, I will have a look at it.

**new2extjs** · 21 Sep 2011 6:17 AM

Here I am with my latest code.
I have tabpanel called "GraphPanel" which is subpanel of other parent tabpanels. GraphPanel has a combo box and a panel in which images will be displayed when an ajax request is called from another tabpanel.
I have made function called "loadImages" which is called after ajax request is successful. Inside loadImages also there is ajax request to read the output and I put it in array. When it is successful, I try to add them in panel which is inside GraphPanel. But nothing is visible.
The code is as follows:

Code:

Ext.define('Image', { 
    singleton: true, 
    array:[],
 plotsPanel:'',
 count:''
   
});
Ext.define('GraphPanel', {
 extend: 'Ext.Panel',
 title: 'Graph',
 autoScroll: 'true',
 layout: 'anchor',
 //Initializing components
 initComponent: function(){
  //Link to Store with models
  var modelsStore = Ext.create('ModelsStore',{});
  
  var columnPlotsPanel = Ext.create('Ext.Panel', {
   id: 'columnPlotsPanel',
   layout: 'column',
   suspendLayout: true  
  });  
  
  
  
 
  //create panel for plots
  this.plotsPanel = new Ext.Panel({
   id: 'plotPanel',
   title: 'Plots',
   height: 500,
   width: '70%',   
   layout: 'anchor',
   autoScroll: 'true',
   
   items:[]  
  });
 
  
  
  //comboBox with models
  var combo = new Ext.form.ComboBox({
   id: 'combo',
   fieldLabel: 'Select a model: ',
   store: modelsStore,
   displayField: 'model',
   valueField: 'model',
   forceSelection: true,
   triggerAction: 'all',
   width: 200  
  });
   
  //container for combobox
  var comboPanel = Ext.create('Ext.Panel', {
   xtype: 'panel',
   id: 'comboGraph',
   //layout: 'fit',
   title: 'Choose model, please',
   height: 500,
   width: '30%',
   items: [combo]
  });
  
  //add modelChoosePanel to container
  columnPlotsPanel.add(comboPanel);
  //add plotsPanel to main container
  columnPlotsPanel.add(this.plotsPanel);
  //add main container to panel
  this.items = [columnPlotsPanel],
  
  
  //Call constructor of parent container 
  this.callParent(arguments); 
  
 },
 
  // create a function that will get the new url and re-render the tab panel
  loadImages:function(){
  
  var url='some value';
  Ext.Ajax.request( {
            url : url,
           
   success : function( response ) {
                var data = eval( Ext.decode(response.responseText) );
    var config = [];
                for( var value in data ){
                    config.push(value+"|"+data[value]);
     
                };
    
    
    for ( var i=0; i< config.length; i++ )
    {
    Image.array[i]=config[i].split("|")[1];
    //console.log(Image.array[i]);
    };
    
    this.plotsPanel.add(
      {html: '<p>This is a panel</p>'}
     
     );
    for (var i=0; i < config.length; i++) {
     console.log("Inside for loop"+Image.array[i]); 
     var img=Image.array[i];
     this.plotsPanel.add(
     
     { xtype: 'component',
      autoEl: {
       tag: 'img',
       src: img,
       width: 700,
       align: 'middle'
      }
     });
    };
    this.plotsPanel.doLayout();
    
    
    
               
            },
   failure: function(){
                    alert('could not reach server');
                },
   
         
      scope : this
        });
  
 
});

**mberrie** · 21 Sep 2011 10:28 AM

Code:

<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <!--<script type="text/javascript" src="ext/bootstrap.js"></script>-->
    <script type="text/javascript" src="ext/ext-debug.js"></script>


    <script type="text/javascript">
        Ext.Loader.setPath('Ext', 'ext/src');
        Ext.Loader.config.disableCaching = false;

        Ext.define('Image', {
            singleton: true,
            array:[],
            plotsPanel:'',
            count:''

        });
        Ext.define('GraphPanel', {
            extend: 'Ext.Panel',
            title: 'Graph',
            autoScroll: 'true',
            layout: 'anchor',

            //Initializing components
            initComponent: function() {
                this.tbar = [
                    {
                        text: 'Load',
                        handler: this.loadImages,
                        scope: this
                    }
                ];
                //create panel for plots
                this.plotsPanel = new Ext.Panel({
                    id: 'plotPanel',
                    title: 'Plots',
                    height: 500,
                    width: '70%',
                    layout: 'anchor',
                    autoScroll: 'true',

                    items:[]
                });

                //add main container to panel
                this.items = [this.plotsPanel];


                //Call constructor of parent container
                this.callParent(arguments);

            },

            // create a function that will get the new url and re-render the tab panel
            loadImages:function() {

                var url = 'some value';
                Ext.Ajax.request({
                    url : "json/items.json",

                    success : function(response) {
                        var data = Ext.decode(response.responseText);

                        this.plotsPanel.add({html: '<p>This is a panel</p>'});

                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            this.plotsPanel.add(
                                    {
                                        xtype: 'component',
                                        autoEl: {
                                            tag: 'div',
                                            cn: [
                                                {
                                                    html: item.caption
                                                },
                                                {
                                                    tag: 'img',
                                                    src: item.src,
                                                    width: 100,
                                                    align: 'middle'
                                                }
                                            ]
                                        }
                                    });
                        }
                    },
                    failure: function() {
                        alert('could not reach server');
                    },
                    scope : this
                });
            }
        });

        Ext.onReady(function() {
            Ext.create('GraphPanel', {
                renderTo: Ext.getBody()
            });
        })
    </script>

</head>
<body>
</body>
</html>

items.json:

Code:

[
    {"src":"http://www.sencha.com/img/20110215-feat-drawing.png", "caption":"Drawing & Charts"},
    {"src":"http://www.sencha.com/img/20110215-feat-data.png", "caption":"Advanced Data"},
    {"src":"http://www.sencha.com/img/20110215-feat-html5.png", "caption":"Overhauled Theme"},
    {"src":"http://www.sencha.com/img/20110215-feat-perf.png", "caption":"Performance Tuned"}

]

hth!

**new2extjs** · 22 Sep 2011 8:25 AM

by mistake

**new2extjs** · 22 Sep 2011 8:39 AM

Million thanks to you !!!

But I have encountered another problem.
It works perfectly when I call the function as this.loadImages(); But I have to call this function from another file and pass url to it and I did it in following way:

Code:

var a = Ext.create('GraphPanel', {});
a.loadImages(url);

And inside loadImages function it recognises the url and also recognises this.plotsPanel but still fails to upload the new items into the panel

I don't know why

Code:

 loadImages:function(url) {
     console.log("url!"+url); // it shows the correct url
                     Ext.Ajax.request({
                    url : url, // the url contains items in json format as you specified
                    success : function(response) {
      this.plotsPanel.removeAll(true);
                        var data = Ext.decode(response.responseText);
      console.log(data); // it gets the correct data also
      console.log(this.plotsPanel); // it recognises the panel also
                        this.plotsPanel.add({html: '<p>This is a panel</p>'}); // but fails to add new item into panel
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
       console.log("inside for loop"); // it is shown too
                            this.plotsPanel.add( 
                                    {
                                        xtype: 'component',
                                        autoEl: {
                                            tag: 'div',
                                            cn: [
                                                {
                                                    html: item.caption
                                                },
                                                {
                                                    tag: 'img',
                                                    src: item.src,
                                                    width: 500,
                                                    align: 'middle'
                                                }
                                            ]
                                        }
                                    });
                        }
      this.plotsPanel.doLayout();
                    },
                    failure: function() {
                        alert('could not reach server');
                    },
                    scope : this
                });
            }

Any suggestions?

**mberrie** · 22 Sep 2011 8:46 PM

You know that if you do this

Code:

var a = Ext.create('GraphPanel', {});
a.loadImages(url);

you actually create a new instance of GraphPanel!! (which btw is not rendered unless you add it to another container)

You have to get hold on the already existing instance of GraphPanel! For now, I recommend using getCmp for that to make your life easier.

**new2extjs** · 22 Sep 2011 9:14 PM

Thanks a lot for the reply.
I will try to investigate how to use "getCmp"

**mberrie** · 22 Sep 2011 9:54 PM

You already used Ext.getCmp in some code that you posted on this thread!

**new2extjs** · 23 Sep 2011 4:59 AM

It should be done inside loadImages function , rite?
I tried to add using Ext.getCmp('plotPanel').add({html: '<p>This is a panel</p>'});
but it doesn't recognise the panel and gives error

Displaying results in one tab panel as output of operation in another tab panel

Thread Tools

Search Thread

Display