Results 1 to 7 of 7

Thread: Help with an Ajax call example!

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4

    Question Answered: Help with an Ajax call example!

    I am trying to load an external html page in a panel to create browsable content. I am not terribly familiar with Ajax but have read through all of the examples and keep seeing the same sample code. My problem is where do I put this code? In other words, in my .js file, where where do I place the Ext.Ajax request so the html web page goes into the panel?

    I realize this is a basic question, but I've spent hours looking for an answer and can't find anything.

  2. Code:
    Ext.Ajax.request({
                url: 'template.html',
                method: 'GET',
                callback: function(options, success, response) {
                    console.log(response.responseText);
                    }
            });
    Okay, so I've highlighted the code you need to change in your case.

    I don't know specifically what panel you want this HTML content displayed within, but hypothetically you would do something like this:

    PHP Code:
    var panel = new Ext.Panel(...);

    Ext.Ajax.request({
                
    url'template.html',
                
    method'GET',
                
    callback: function(optionssuccessresponse) {
                    
    panel.update(response.responseText);
                }
            }); 

  3. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99

    Default

    Quote Originally Posted by nightmd View Post
    I am not terribly familiar with Ajax but have read through all of the examples and keep seeing the same sample code. My problem is where do I put this code?
    What code are you referring to?

    Have you tried implementing anything thus far? If you post some sample code with an explanation of what you are having specific trouble with, I'll be glad to help.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    4

    Default

    Maybe what I want to do is not really meant for Sencha. Essentially I want to be able to display html content inside of a panel from a file hosted on the server where the Sencha app is located. In my example code, the file is "template.html" and it is accessed through the list element. I tried using the <embed> command but found it added a weird scroll bar and would not work consistently. I read the way to do this right is to use AJAX, which honestly I don't full understand and probably should do some research on (I really don't understand what a callback is, etc.). I found the following code in the forums:

    Code:
    Ext.Ajax.request({
                url: 'template.html',
                method: 'GET',
                callback: function(options, success, response) {
                    console.log(response.responseText);
                    }
            });
    So now, where do I put this inside of my app.js code in order to show it inside of my "guidelines" panel? Am I asking too much of Sencha to think I could use it to create a mini-browser of sorts for hosted content? See the code below:

    Code:
    RediReader = new Ext.Application({
        name: "RediReader",
    
    
        launch: function() {
        
        
        RediReader.guidelinePanel = new Ext.Panel ({
                id: 'guidelines',
                
            });
            
            RediReader.detailPanel = new Ext.Panel({
                id: 'detailpanel',
                layout: 'fit',
                items: [RediReader.guidelinePanel],
                dockedItems: [
                        {
                        xtype: 'toolbar',
                        items: [{
                            text: 'back',
                            ui: 'back',
                            handler: function() {
                                RediReader.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
                            }
                        }]
                        }
                ]
            });
    
    
            RediReader.listPanel = new Ext.List({
                id: 'disclosurelist',
                store: RediReader.ListStore,
                itemTpl: '<div class="guideline">{Name}</div>',
                grouped: true,
                onItemDisclosure: function(record, btn, index) {
                    RediReader.detailPanel.update(record.data);
                    RediReader.Viewport.setActiveItem('detailpanel');
                }
            });
    
    
            RediReader.listWrapper = new Ext.Panel ({
                id: 'listwrapper',
                layout: 'fit',
                items: [RediReader.listPanel],
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Guidelines'
                }]
            });
    
    
            RediReader.Viewport = new Ext.Panel ({
                fullscreen: true,
                layout: 'card',
                cardSwitchAnimation: 'slide',
                items: [RediReader.listWrapper, RediReader.detailPanel]
            });
    
    
        }
    });
    Thanks so much for your help!

  5. #4
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99

    Default

    Code:
    Ext.Ajax.request({
                url: 'template.html',
                method: 'GET',
                callback: function(options, success, response) {
                    console.log(response.responseText);
                    }
            });
    Okay, so I've highlighted the code you need to change in your case.

    I don't know specifically what panel you want this HTML content displayed within, but hypothetically you would do something like this:

    PHP Code:
    var panel = new Ext.Panel(...);

    Ext.Ajax.request({
                
    url'template.html',
                
    method'GET',
                
    callback: function(optionssuccessresponse) {
                    
    panel.update(response.responseText);
                }
            }); 

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    4

    Default Thanks

    That worked great! I appreciate the help.

  7. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    4

    Default One more thing...

    Arthur,

    What you provided works perfectly, but I have a dilemma. If the url I call is in a subdirectory, none of it's relative links work because if I tap a hyperlink, the browser looks for the file in the main app directory.

    For example, I can request a page called "links.html" through the Ajax call in a directory called "files", but if I tap on a hyperlink on the links.html page that refers to a document in a directory relative to the main page, the browser says it can't find the file because it is looking for it in the same directory as my app.js sencha app.

    Is there a solution to this problem besides being more specific in the links.html code? The reason I care is because I am working with heavily linked pre-existing files and don't want to have to recode them. It's almost like I have to change the path directory but don't know how to do it.

    Thanks,

    Chris

  8. #7
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99

    Default

    Unfortunately, I can't think of an easier way to deal with those relative links. The only two options I can think of are:

    - rewrite the code on those pages to use full URL paths
    - use some sort of Regular Expression to match/replace the links in the callback of your Ext.Ajax.request()

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •