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

      0  

    Default


    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?

  2. #12
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


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

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

      0  

    Default


    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
            });
      
     
    });

  4. #14
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    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!

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

      0  

    Default


    by mistake

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

      0  

    Default


    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?

  7. #17
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    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.

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

      0  

    Default


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

  9. #19
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


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

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

      0  

    Default


    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

Thread Participants: 1