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
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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