Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 38

Thread: Tree without TreeLoader?

  1. #11
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default OK

    Here is version adapted for 2.0.

    PHP Code:
    Ext.namespace('Ext.air');
     
           
    Ext.air.TreeLoader Ext.extend(Ext.tree.TreeLoader, {
     
                        
    sandBoxnull,
                        
                        
    load : function(nodecallback){ 
                                
                                if(
    this.clearOnLoad){ 
                                    while(
    node.firstChild){ 
                                        
    node.removeChild(node.firstChild); 
                                    } 
                                } 
                                
                               if(
    this.doPreload(node)){ // preloaded json children
                                          
    if(typeof callback == "function"){
                                               
    callback();
                                         }
                               }else if( 
    typeof this.sandBox == 'function'){ 
                                     if(
    this.fireEvent("beforeload"thisnodecallback) !== false){
                                           
    this.processResponse(this.sandBox(thisnode)||[],node,callback); 
                                           
    this.fireEvent("load"thisnode);
                                     }else{
                                           
    // if the load is cancelled, make sure we notify
                                           // the node that we are done
                                          
    if(typeof callback == "function"){
                                                    
    callback();
                                          }
                                    }
                                } 
                        }

                    , 
    processResponse : function(responsenodecallback){
                                  
                                  
    node.beginUpdate();
                                  for(var 
    0len response.lengthleni++){
                                             var 
    this.createNode(response[i]);
                                             if(
    n){
                                                 
    node.appendChild(n);
                                            }
                                  }
                                  
    node.endUpdate();
                                  if(
    typeof callback == "function"){
                                            
    callback(thisnode);
                                  }
                       
                      }
    }); 
    attr has no properties
    [Break on this error] attr.loader = this;
    --Fixed.

    The sandBox mediator was chosen so you could do:
    PHP Code:
    ,sandBoxparentSandboxBridge.getTreeNodes.createDelegate(air);  //scope control 
    The load method just calls whatever your sandBox is (scoped the way you want) and passes the (treeloader , node ) to it.

    It also, means the sandBox can be dynamic.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #12
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default wow again.

    This is frustrating because I know you have worked very hard on this (or maybe not!) and I just cannot get things to work properly...I wish I understood more of it!

    So here is the code that is trying to render the Tree...

    PHP Code:
    var Tree Ext.tree
        
    var 
    airLoader = new  Ext.air.TreeLoader({
            
    baseAttrs: { checkedfalse },
            
    requestMethod'GET',
              
    sandBoxparentSandboxBridge.getTreeNodes.createDelegate(parentSandboxBridge)  //scope control  ERROR ON THIS LINE
    });

    var 
    myTree = new Tree.TreePanel({
                
    el'tree-div',
                
    autoScrolltrue,
                
    animatetrue,
                
    enableDDtrue,
                
    monitorResizetrue,
                
    autoHeighttrue,
                
    border:false,
                
    containerScrolltrue,
                
    rootVisible:true,
                
    loaderairLoader
            
    });
            
    var 
    root = new Ext.tree.AsyncTreeNode({
                            
    text'Categories',
                            
    expanded:false,
                            
    loaderairLoader ,
                            
    draggable:false// disable root node dragging
                            
    checkedfalse
                            
    });


    myTree.setRootNode(root);
    myTree.render();
    root.expand(true); 
    and I am getting an undefined value at the "parentSandboxBridge line...in the sandBox line.

    Im not quite sure the parentSandboxBridge is getting scoped right (Im doing something wrong)

    I am looking through the Tree docs to see what I can learn from the Loader section...
    Also, my getTreeNodes function should return an array of ALL of the categories based on your code correct? I am going to try and set that up as well so I can test it with actual data.

    Thanks Again

    John

  3. #13
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    would need to see more of your air stuff. You probably just have the wrong reference.

    Can you post more of your page and js?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  4. #14
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default sure thing!

    From myRoot.htm (this is the main AIR loading file)

    PHP Code:
            /**
             * get Tree nodes menu information
             * 
             * this function will request the node information from the database
             * based on the categories that are setup in there!
             * 
             */
            
            
    function getTreeNodes(TreeLoadernode){
                
                
    air.trace("fetching nodes");
       
            var 
    get = new air.SQLStatement();
            
    get.text "SELECT * FROM `category`;";
            
    get.sqlConnection db;
            
    get.execute();
            
    //air.trace(get.getResult().data);
                 
    return get.getResult().data;
            } 
    the parentSandboxBridge comes from this page as well, and here is the code for it....

    PHP Code:
    var Exposed = {};
    // onload setup the bridge (abbreviated to show setup)
    document.getElementById('UI').contentWindow.parentSandboxBridge Exposed
    and here is the iframe that loads the ui.htm page which contains the Ext framework code (and the Tree code)

    PHP Code:
    <iframe id="UI"
                
    src="http://SomeRemoteDomain.com/ui.htm"
                
    sandboxRoot="http://SomeRemoteDomain.com/"
                
    documentRoot="app-resource:/"
                
    width="100%" 
                
    height="100%"
                
    style="border: 0px; margin: 0px; padding: 0px; width: 100%;overflow:hidden; background: #000;">
      </
    iframe
    So that is how the "bridge gets created so you can access parentSandboxBridge from the ui.htm page....

    Here is the Tree code I have in the ui.htm page that is trying to ref the parentSandboxBridge var that was created in the root page...

    PHP Code:

    Ext
    .onReady(function(){
    var 
    Tree Ext.tree
        
    var 
    airLoader = new  Ext.air.TreeLoader({
            
    baseAttrs: { checkedfalse },
            
    requestMethod'GET',
              
    sandBoxparentSandboxBridge.getTreeNodes.createDelegate(parentSandboxBridge)
    });

    var 
    myTree = new Tree.TreePanel({
            
    el'tree-div',
            
    autoScrolltrue,
            
    animatetrue,
            
    enableDDtrue,
            
    monitorResizetrue,
            
    autoHeighttrue,
            
    border:false,
            
    containerScrolltrue,
            
    rootVisible:true,
            
    loaderairLoader
    });
            
    var 
    root = new Ext.tree.AsyncTreeNode({
            
    text'Categories',
            
    expanded:false,
            
    loaderairLoader ,
            
    draggable:false// disable root node dragging
            
    checkedfalse
    });

    myTree.setRootNode(root);
    myTree.render();
    root.expand(true);

    }); 
    // end ext on ready

    }); 
    I hope this is making sense, but that is how the "bridge" works....

    Thanks!
    John
    Last edited by trops; 29 Nov 2007 at 8:29 AM. Reason: removed my testing code...

  5. #15
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default here is the entire myRoot.htm file

    PHP Code:
    <html>
      <
    head>
      <
    title>Lifeapp</title>
      <
    style>
        
    BODY{
            
    margin:0;
            
    padding0;
            
    overflow:hidden;
            
    height100%;
        }
      </
    style>
      <!--
          
        
    NOTE:
        
          
    We need to include all of the AIR API specific functions in this document
        which has access to the local machine 
    (and does not need to use eval() ).
        
        
    All of the framework UI libraries and such will be located in the other ui.htm file
        that contains all of the UI elements
    .
      
      -->
      <
    script type="text/javascript" src="AIRAliases.js"></script>
      <script type="text/javascript">
          
        // get the form information
            var db;
            
           /**
            * get the form information based on the supplied form id
            * 
            * this function will return the form data from the SQLite database
            * using the AIR framework, and return the data as an object
            * 
            * @param     {Object} formId
            * @return     {Object} get.getResult().data
            */
            
            function getFormInformation(formId){
                
                var get = new air.SQLStatement();
                get.text = "SELECT * FROM `forms` WHERE form_id = '" + formId + "';";
                get.sqlConnection = db;
                get.execute();
                
                 return get.getResult().data;
            }
            
            /**
             * get Tree nodes menu information
             * 
             * this function will request the node information from the database
             * based on the categories that are setup in there!
             * 
             */
            
            function getTreeNodes(TreeLoader, node){
                
                air.trace("fetching nodes");
       
                var get = new air.SQLStatement();
                get.text = "SELECT * FROM `category`;";
                get.sqlConnection = db;
                get.execute();
                //air.trace(get.getResult().data);
                 return get.getResult().data;

            }
            
        // setup the database connection
            db = new air.SQLConnection( true );
            db.open( air.File.applicationResourceDirectory.resolvePath( "lifeapp.sqlite" ), true );

    // --- end database stuff



        // create the Exposed object that will translate into (parentSandboxBridge)
                    var Exposed = {};
                    
                    // add functions to the Exposed object
                        Exposed.getFormInformation     = getFormInformation;
                        Exposed.getTreeNodes             = getTreeNodes;
                        
                // native window
                    var myWindow = window.nativeWindow;    
                // trace (simple debuggging
                    Exposed.trace = function(str) { air.trace(str); }
                
                
                // on load set up the Exposed object.
                // this will set up the parent sandbox for the AIR functions.
                    function doLoad() {
                        
                        // this sets the UI parentSandboxBridge object to the Exposed object we have created... (pass to IFRAME)            
                            document.getElementById('UI').contentWindow.parentSandboxBridge = Exposed;
                        
                        // BRIDGE functions - to allow access to Ext framework
                        // and this will set a function from the root, to a function in the childSandbox
                        // we shall set up all of our listeners here!
                            window.resizeLayout                 = document.getElementById('UI').contentWindow.childSandboxBridge.resizeLayout;
                            //window.renderFormWindow     = document.getElementById('UI').contentWindow.childSandboxBridge.renderFormWindow;
                        
                        // NATIVE WINDOW LISTENER
                        // now add an Event listener for checking the RESIZE event of the native window, and upon RESIZE
                        // we need to access the Ext functions in the Child layout in order to resize the layout properly.
                            window.addEventListener(air.NativeWindowBoundsEvent.RESIZE, window.resizeLayout);
                            
                    }
                
                
    //////////////  DATABASE functions

                 /**
                  * connect to a database
                  * 
                  * this function will simply connect to the SQLite database specified
                  * 
                  * @param string    database name (filepath)
                  * @return bool    success|failure
                  */
                 
                 function makeConnection(dbname){
                     var connection = new air.SQLConnection();
                     connection.open( air.File.applicationResourceDirectory.resolvePath(dbname) );
                    return connection !== undefined ? connection : false;
                 }
                 
                 /**
                  * make an SQL statement
                  * 
                  * this function will generate a statement AIR variable/connection
                  * 
                  * @param {Object} statement
                  * @return {Object} the statement AIR object
                  */
                 
                 function makeStatementConn(dbname){
                     var statement = new air.SQLStatement();
                    var connection = makeConnection(dbname);
                    if (connection) {
                        statement.sqlConnection = connection;
                        air.trace("connection est");
                        return statement;
                    }
                    else {
                        return false;
                    }
                 }


                

      </script>
      </head>
      <body onload="doLoad();">
      <iframe id="UI"
                src="http://SomeRemoteDomain.com/ui.htm"
                sandboxRoot="http://SomeRemoteDomain.com/"
                documentRoot="app-resource:/"
                width="100%" 
                height="100%"
                style="border: 0px; margin: 0px; padding: 0px; width: 100%;overflow:hidden; background: #000;">
      </iframe>
      </body>
      </html> 

  6. #16
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default hmmm

    Ok jut tested and parentSandboxBridge isnt accessible in the Ext.onReady call....I think it may not exist yet ....so working on that bit now...may have to set up something to kickoff the menu once the page is loaded, but I cant understand why it wouldnt exist yet onload....

  7. #17
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default ok things are happening....

    Ok, I moved the tree out of the onReady function and just created a link to kickoff the Tree...

    Now parentSandboxBridge is accessible, and the menu is getting generated...but...it creates a child node every second or so...and just keeps going and going and going! heheh, so definitely on the right track!

    Here is what I hardcoded into the getTreeNodes function as a response

    PHP Code:
    function getTreeNodes(TreeLoadernode){
                
                
    /*
                air.trace("fetching nodes");
       
                var get = new air.SQLStatement();
                get.text = "SELECT * FROM `category`;";
                get.sqlConnection = db;
                get.execute();
                //air.trace(get.getResult().data);
                 return get.getResult().data;
                 */
                
            
    return [{
            
    id1,
            
    text'A leaf Node',
                    
    leaftrue
                        
    },{
                            
    id2,
                            
    text'A folder Node',
                            
    children: [{
                                
    id3,
                                
    text'A child Node',
                                
    leaftrue
                            
    }]
                       }]

            } 
    IT looks like a living ladder is being created...each second a new folder pops under the one anove it...

    This is cool, I can smell the end!

  8. #18
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Woah, can't keep up with all you're changes. And just page frags doesn't really help a lot.

    Does the air toolkit have an equivalent to onReady (so you know when the iframe has completed loading)?

    Sounds like your making progress tho Looks like you've just got the sandBox scope to worry about.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #19
    Ext User
    Join Date
    Jun 2007
    Posts
    48

    Default hehe

    yeah sorry for the flurry of changes....

    At present, I have the menu generating, but looks like its caught in a loop of some sort as mentioned above. So here is the ui.htm page..

    PHP Code:
    <html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Lifeapp UI</title>
    <
    style>
        
    BODY{
            
    margin:0;
            
    padding0;
            
    overflow:hidden;
            
    height100%;
        }
        
        
    #tree-div{
            
    height100%;
            
    overflow:auto;
            
    border0;
        }
    </
    style>
    <
    link rel="stylesheet" href="lib/ext-2.0-beta1/resources/css/ext-all.css">
    <
    script type="text/javascript" src="lib/prototype/prototype.js"></script>
    <script type="text/javascript" src="lib/scriptaculous/scriptaculous.js"></script>
    <script type="text/javascript" src="lib/ext-2.0-beta1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="lib/ext-2.0-beta1/ext-all-debug.js"></script>
    <script type="text/javascript" src="lib/js/validate.js"></script>
    <script type="text/javascript" src="resources/js/airTree.js"></script>
    </head>

    <body onload="doLoad();">
        <div id="north"></div>
        <div id="east"></div>
        <div id="south"><a href="javascript: doMenu();">activate menu</a></div>
        <div id="center">
            <div id="form-win"></div>
        </div>
        <div id="west">
            <div id="tree-div"></div>
        </div>
    </body>
    <script type="text/javascript">


        /**
         * render the form in a window
         * 
         * this function will request form information from the parentSandbox making
         * use of the AIR database connection to our local database "lifeapp.sqlite" that
         * we have created.
         * 
         */
        
        function getFormInformation(formId){
            parentSandboxBridge.trace(formId);
            
            // grab the form information based on the item clicked...
                var formData     = parentSandboxBridge.getFormInformation(formId);
                
            // make sure we didnt receive a false response!
                if (formData !== false) {
                    
                    formData.forEach = function(formdata){
                        parentSandboxBridge.trace(formdata.form_id);
                    };
                    // evaluate this  - should be an object...
                    var formFields = eval(formData[0].form_object);
                    
                    if (typeof formFields === 'object') {
                    
                    
                        var formTitle = formData[0].form_name;
                        var formId = formData[0].formId;
                        
                        // we have to grab the form information from the database....
                        // instantiate some vars for the formpanel and the window...
                        var win, simple;
                        
                        // then add it to the window.
                        // lets generate a window
                        
                        if (!win) {
                            win = new Ext.Window({
                                el: 'form-win',
                                layout: 'fit',
                                width: 500,
                                height: 300,
                                closeAction: 'hide',
                                plain: true,
                                constrain: true,
                                collapsible: true,
                                title: formTitle,
                                items: new Ext.FormPanel({
                                    labelWidth: 100, // label settings here cascade unless overridden
                                    frame: true, // this will remove the background Ext color if false
                                    //title: 'Welcome to my first form',
                                    bodyStyle: 'padding:20px 20px 0',
                                    autoWidth: true,
                                    height: '300px',
                                    defaults: {
                                        width: 'auto'
                                    },
                                    defaultType: 'textfield',
                                    items: formFields // the form values received from the server!!!!!!
                                })
                            }); // end window
                        }
                        
                        // show the window
                        win.show(this);
                    }
                    
                }else{
                    
                    //Ext.MessageBox.alert("sorry nothing to display");
                    Ext.Msg.alert('Error: output', 'No for data to display.');
                }
        }
        
        
    function doMenu(){
        
            parentSandboxBridge.trace("inside");
            
            var Tree = Ext.tree; 
        
            var airLoader = new  Ext.air.TreeLoader({
                    baseAttrs: { checked: false },
                    requestMethod: 'GET',
                      sandBox: parentSandboxBridge.getTreeNodes //scope control
            });
            
            var myTree = new Tree.TreePanel({
                    el: 'tree-div',
                    autoScroll: true,
                    animate: true,
                    enableDD: true,
                    monitorResize: true,
                    autoHeight: true,
                    border:false,
                    containerScroll: true,
                    rootVisible:true,
                    loader: airLoader
            });
                    
            var root = new Ext.tree.AsyncTreeNode({
                    text: 'Categories',
                    expanded:false,
                    //loader: airLoader ,
                    draggable:false, // disable root node dragging
                    checked: false
            });
            
            myTree.setRootNode(root);
            myTree.render();
            root.expand(true);
        
        
    }
        Ext.onReady(function(){
        
            // it will render to the document.body.
            viewport = new Ext.Viewport({
                layout: 'border',
                monitorResize: false,
                items: [new Ext.BoxComponent({ // raw
                    region: 'north',
                    el: 'north',
                    height: 5
                }), new Ext.BoxComponent({ // raw
                    region: 'center',
                    el: 'center',
                    layout: 'fit',
                    monitorResize: true
                }), {
                    region: 'south',
                    contentEl: 'south',
                    split: true,
                    height: 100,
                    minSize: 100,
                    //maxSize: 200,
                    collapsible: true,
                    title: 'South',
                    margins: '0 0 0 0',
                    monitorResize: true
                }, {
                    region: 'east',
                    title: 'East Side',
                    collapsible: true,
                    split: true,
                    width: 225,
                    minSize: 175,
                    //maxSize: 400,
                    layout: 'fit',
                    margins: '0 5 0 0',
                    items: new Ext.TabPanel({
                        border: false,
                        activeTab: 1,
                        tabPosition: 'bottom',
                        items: [{
                            html: '<p>A TabPanel component can be a region.</p>',
                            title: 'A Tab',
                            autoScroll: true
                        }, new Ext.grid.PropertyGrid({
                            title: 'Property Grid',
                            closable: true,
                            source: {
                                "(name)": "Properties Grid",
                                "grouping": false,
                                "autoFitColumns": true,
                                "productionQuality": false,
                                "created": new Date(Date.parse('10/15/2006')),
                                "tested": false,
                                "version": '.01',
                                "borderWidth": 1
                            }
                        })]
                    }),
                    monitorResize: true
                }, {
                    region: 'west',
                    id: 'west-panel',
                    title: 'West',
                    split: true,
                    width: 200,
                    minSize: 175,
                    // maxSize: 400,
                    collapsible: true,
                    margins: '0 0 0 5',
                    layout: 'accordion',
                    layoutConfig: {
                        animate: true
                    },
                    items: [{
                        contentEl: 'west',
                        title: 'Navigation',
                        border: false,
                        iconCls: 'nav'
                    }, {
                        title: 'Settings',
                        html: '<p>Some settings in here.</p>',
                        border: false,
                        iconCls: 'settings'
                    }]
                }]
            });
            


    }); // end ext on ready

        
    /**
     *  resize the layout when the user resizes the Browser window.
     *  
     *  this function has been bridged to the window object in the classic parent sandbox.
     */

     function resizeLayout(e){
        // recalculate the layout
            timeLayout = setInterval(resizeLayoutFinal, 500);
     }
     

     function resizeLayoutFinal(){
         clearInterval(timeLayout);
         viewport.doLayout();
     }
     
     /**
      * on load function (when page loads)
      * 
      * This function will set the proper functions in the childSandboxBridge object
      * namely the resizeWindow function that is bridged to the parent, and the actual function
      * resides in the child so we can properly use the Ext framework (or any framework)
      * for security reasons.
      */
     
     function doLoad(){
             // setup the childSandboxBridge object
            // this is our bridge so we can talk BACK to the parent and vice versa.
                 childSandboxBridge = { 
                    resizeLayout: resizeLayout
                }
                
            //    parentSandboxBridge.trace("something");


     }
     
    </script>
    </html> 
    Im just starting out in AIR, thought it would be fun, so Im not sure about a listener for the loading of the iframe....I have to check that out...or just write some listeners in the parent (myRoot.htm) and maybe call a function in the child (ui.htm) when it has loaded...so checking onload from another file....

    ugh.

    Is that the response in the getTreeNodes that you expected when you wrote that class? I can format it however I just need to confirm that is what you had in mind ;-)

    Thanks again Doug this is teaching me alot

  10. #20
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Wow, your load vs onReady timing is an issue. And the tree isn't even part of your layout (yet?).

    I don't see your iframe "UI" markup anywhere, where is that now?

    But,
    I would try moving everything to Ext.onReady. As it stands now, childSandboxBridge doesn't get scoped until the document load event fires (after Ext.onREady does).
    That's your problem.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Page 2 of 4 FirstFirst 1234 LastLast

Posting Permissions

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