1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    noamway is on a distinguished road

      0  

    Default Answered: how can I update a panel HTML with AJAX

    Answered: how can I update a panel HTML with AJAX


    Hi,

    This is my code:
    HTML Code:
    	Ext.onReady(function() {
    		Ext.create('Ext.panel.Panel', {
    			id:'hello',
    			title: 'Hello',
    			width: 200,
    			html: '<p>World!</p>',
    			renderTo: Ext.getBody()
    		});
    	});
    I like to load the panel with an URL address and not with the HTML.

    1. How can I write that?
    2. How can I update the panel HTML after the page load? In 3 version I know there was "load" option.

    Thanks for the help

  2. Looks like you can use:
    http://docs.sencha.com/ext-js/4-1/#!...er-method-load

    You can then pass in a new url (that will overwrite what was there originally by the looks of it)

    Code:
    // get the panel's loader
    var myLoader = myPanel.getLoader();
    
    // load the content using a new loader config
    myLoader.load({
        url: 'myNewUrl.html'
        // , params: { foo: 'bar' }            // any params you want to pass to the loader's url
    })

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    358
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You might check out the loader config
    http://docs.sencha.com/ext-js/4-1/#!...ent-cfg-loader

    That will accept configs from
    http://docs.sencha.com/ext-js/4-1/#!...omponentLoader

    Code:
    Ext.create('Ext.panel.Panel', {
        height: 300,
        width: 300,
        loader: {
            url: 'content.html',
            autoLoad: true          // to load automatically when the panel is instantiated
        },
        renderTo: Ext.getBody()
    });

  4. #3
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    noamway is on a distinguished road

      0  

    Default


    It's working great thanks, what about updating the URL after the page load, in version 3 I use "load" but I can't make it work now.

    Thanks for the help

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    358
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Looks like you can use:
    http://docs.sencha.com/ext-js/4-1/#!...er-method-load

    You can then pass in a new url (that will overwrite what was there originally by the looks of it)

    Code:
    // get the panel's loader
    var myLoader = myPanel.getLoader();
    
    // load the content using a new loader config
    myLoader.load({
        url: 'myNewUrl.html'
        // , params: { foo: 'bar' }            // any params you want to pass to the loader's url
    })

  6. #5
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    noamway is on a distinguished road

      0  

    Default


    Thanks, I try this code:
    HTML Code:
    	Ext.onReady(function() {
    
    		Ext.create('Ext.panel.Panel', {
    			id:'hello',
    			title: 'Hello',
    			width: 200,
    			loader: {
    				url: '/',
    				autoLoad: true          // to load automatically when the panel is instantiated
    			},
    			renderTo: Ext.getBody()
    		});
    
    		// get the panel's loader
    		var myLoader = Ext.getCmp('hello').getLoader();
    
    		// load the content using a new loader config
    		myLoader.load({
    			url: '/noam.html'
    			// , params: { foo: 'bar' }            // any params you want to pass to the loader's url
    		})
    
    	
    	});
    And I'm getting this error message with Chrome:
    Cannot read property 'scope' of undefined
    This is the code in the debug file:
    HTML Code:
        onComplete: function(options, success, response) {
            var me = this,
                active = me.active,
                scope = active.scope,
    Thanks

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    358
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    What if you take the autoLoad off of your panel's loader's config orignally since you're loading it manually?

  8. #7
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    noamway is on a distinguished road

      0  

    Default


    Yes, without 'autoLoad' it's working, but if it's working only like that, why do I need the load option in the beginning? weird.

    Thanks for your help

Thread Participants: 1