1. #1
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    rajesh_kar123 is on a distinguished road

      0  

    Thumbs up Loading a html page including external js to a panel not working

    Loading a html page including external js to a panel not working


    Hi All,
    My problem statement:::::::::::::::::::::::

    I have used a border layout for my project.

    In that layout, I have regions like North, West and center.

    The center panel is just a panel for me, not tab panel

    I am using an ext tree to load html/jsp pages on click of the items in tree on the west panel.

    I am able to show a normal html on the center panel using ajax response.

    But I am not able to load a html having all the external js files included inside that.

    It looks like the tree is not loading any js files.

    Please help me out with some sample source code.


    Thanks In advance,

    Rajesh
    Last edited by mystix; 12 Mar 2009 at 11:19 PM. Reason: moved to 2.x Help from Open Discussion

  2. #2
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    74
    Vote Rating
    1
    razvanioan is on a distinguished road

      0  

    Default


    you should use panel.load() function not Ajax calls, in there you have a config option called scripts which have to set to true to load JS also:


    from API Documentation, Ext.Panel -> load():
    PHP Code:
    panel.load({
        
    url"your-url.php",
        
    params: {param1"foo"param2"bar"}, // or a URL encoded string
        
    callbackyourFunction,
        
    scopeyourObject// optional scope for the callback
        
    discardUrlfalse,
        
    nocachefalse,
        
    text"Loading...",
        
    timeout30,
        
    scriptstrue
    }); 

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    rajesh_kar123 is on a distinguished road

      0  

    Default


    I have this code, please let me know where to paste your code:
    This code is for my tree.
    <tag>

    //
    // Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
    //
    Ext.app.BookLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes : function(attr){
    if(attr.pname){ // is it an author node?

    // Set the node text that will show in the tree since our raw data does not include a text attribute:
    attr.text = attr.pname;

    // Author icon, using the gender flag to choose a specific icon:
    attr.iconCls = 'author-' + attr.gender;

    // Override these values for our folder nodes because we are loading all data at once. If we were
    // loading each node asynchronously (the default) we would not want to do this:
    attr.loaded = true;
    //attr.expanded = true;
    }
    else if(attr.aname){ // is it a book node?

    // Set the node text that will show in the tree since our raw data does not include a text attribute:
    attr.text = attr.aname;

    // Book icon:
    attr.iconCls = 'book';

    // Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML,
    // but this example demonstrates that you can control this even when you cannot dictate the format of
    // the incoming source XML:
    attr.leaf = true;
    }
    }
    });

    Ext.onReady(function(){

    var detailsText = '<i>Select a book to see more information...</i>';

    var tpl = new Ext.Template(
    '<h2 class="title">{title}</h2>',
    '<p><b>Published</b>: {published}</p>',
    '<p><b>Synopsis</b>: {innerText}</p>',
    '<p><a href="{url}" target="_blank">Purchase from Amazon</a></p>'
    );
    tpl.compile();

    new Ext.Panel({
    title: 'Reading List',
    renderTo: 'tree',
    layout: 'border',
    width: '100%',
    height: 500,
    items: [{
    xtype: 'treepanel',
    id: 'tree-panel',
    region: 'center',
    width: '100%',
    margins: '2 2 0 2',
    autoScroll: true,
    rootVisible: false,
    root: new Ext.tree.AsyncTreeNode(),

    // Our custom TreeLoader:
    loader: new Ext.app.BookLoader({
    dataUrl:'xml-tree-data.xml'
    }),

    listeners: {
    'render': function(tp){
    tp.getSelectionModel().on('selectionchange', function(tree, node){
    var el = Ext.getCmp('details-panel').body;
    if(node.leaf){
    //alert("Hi.. "+node.text);
    Ext.Ajax.request(
    {
    url: 'Create_User_Profile.html',
    scripts: true,
    params: {
    nodeid: node.id
    },
    success: function(responseObject) {
    el.update(responseObject.responseText);

    },
    failure: function() {
    Ext.Msg.alert('Status', 'Unable to show history at this time. Please try again later.');
    }

    })
    // tpl.overwrite(el, node.attributes);
    }else{
    el.update(detailsText);
    }
    })
    }
    }
    }]
    });
    });

    </tag>

  4. #4
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    74
    Vote Rating
    1
    razvanioan is on a distinguished road

      0  

    Default


    You can use this on a function triggered by a button or something.

    It will load your generated HTML page in the url, and also will allow to load JavaScripts in that file.

    I don't know where you need this, and also is very hard for me to read your code. Please try to put it between PHP tags (you have a button in the HTML editor).

  5. #5

  6. #6
    Sencha User frrogoy's Avatar
    Join Date
    Jan 2010
    Location
    Central Indiana
    Posts
    89
    Vote Rating
    0
    frrogoy is on a distinguished road

      0  

    Default


    I am having trouble finding panel->load in the api. Does the callback function get passed anything? How do you load scripts?
    I am working on a simple app that has a form that requests login info: ID and password. In response I want a php module to display a nested list of info (new leads) for that user, (or invalid login). My button code is below. I'm fuzzy on how pass data back from the php module.
    PHP Code:
    dockedItems: [{
                    
    xtype'toolbar',
                    
    dock'bottom',
                    
    items: [{
                            
    xtype'spacer'
                        
    },{
                        
    name'Login',
                        
    text'Log In',
                        
    centeredtrue,
                        
    width100,
                        
    handler: function(){
                            
    panel.load({
                                
    url"getmyleads.php",
                                
    params: {idExt.getCmp('eml').valuepwExt.getCmp('pw').value}, 
                                
    callbacklogged,
                            
    //    scope: yourObject, // don't understand what this means
                                
    discardUrlfalse,
                                
    nocachefalse,
                                
    text"Loading...",
                                
    timeout30,
                                
    scriptstrue
                            
    });
                        }  
                        },{
                            
    xtype'spacer'
                    
    }]
               }] 
    Sorry! I was searching the Sencha Touch forum and ended up on this thread. I'll try to find another place to post my question...
    Last edited by frrogoy; 17 Dec 2010 at 7:45 AM. Reason: Misplaced inquiry
    Frank R.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi