1. #91
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    A small bug that I had to fix on my system: (index.php line 75)
    PHP Code:
    $data stripslashes((isset($_POST['data'])) ? $_POST['data'] :  null) ; 
    note the addition of the stripslashes function, I was ending up with extra slashes that were causing invalid json.
    If it matters, my server platform is apache2 w/ php5 on linux.

  2. #92
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by psavolai View Post
    It works.
    thank you very much Sierk.

    I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
    searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
    ... needles to say that I found none.
    The generated json can be fed to anything that accepts a lazy render config object. which should be anything that is based off of Ext.Component, but will typically be viewport or panel.
    I have two basic use cases:

    1. At application init create needed panels and such.
    " this is easy, just copy the generated code json literally to the constructor call ".
    ... and assignt it to what ?
    new Ext.Panel('your json here');
    ... and what if I'd rather have the json files in separate files, how would I suck them in ?
    ... which portion of files (just the items, or all of it ?)
    However you wanted. Generally Ext.Ajax.request, but you might also look into the remoteComponent extension that I have seen referenced.
    2. Dynamically, after a click on a button, load some form and display it on the ui
    - simple setup :
    two panels on borderlayout, first one having two buttons and the other panel, well, just lying there , empty.
    - user clicks on first button: load the contents of "panel1.json" in the place of the original panel2
    - user clicks on button two: load the contents of "panelx.json" in the place of original panel2
    You would need to have code that would clear out (destroy) the items of the target panel, then get the new json (via ajax most likely, as above) and add it to the target panel. Note that I think this is a rather unusual use case, as it is not very good coding practice to be actually modifying what should be static portions of the layout. More common practice would be to use tabPanels and Ext.Windows, which should accept the json unmodified.

    To me these use cases represent the basics of form handling in web applications.
    Sorry for being a little thick, but I just can't get a clear picture from the docs that are available.

    If you describe the steps to me (or even better, show me a working example) I will promise to make screencams out of the solutions and post them for future generations .

    Petri.
    You seem to be interested in using snippets of json to modify a layout at runtime, which as I mentioned should be avoided. The way I see it, the application's main interface should be described by a single config, which is generally included in the index.html and fed to viewport. Dynamic portions of the ui are best created with tabPanels (to which new tabs are easily added) and popup Ext.Windows. To some extent I could see a cardLayout being usefull as well.

  3. #93
    Ext User
    Join Date
    Aug 2007
    Posts
    119
    Vote Rating
    0
    sierk is on a distinguished road

      0  

    Default


    Quote Originally Posted by devnull View Post
    A small bug that I had to fix on my system: (index.php line 75)
    PHP Code:
    $data stripslashes((isset($_POST['data'])) ? $_POST['data'] :  null) ; 
    note the addition of the stripslashes function, I was ending up with extra slashes that were causing invalid json.
    If it matters, my server platform is apache2 w/ php5 on linux.
    Will give it a test myself and if it works will add it to the code of next release

    Sierk

  4. #94
    Ext User
    Join Date
    Aug 2007
    Posts
    119
    Vote Rating
    0
    sierk is on a distinguished road

      0  

    Default


    Quote Originally Posted by psavolai View Post
    It works.
    thank you very much Sierk.

    I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
    searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
    ... needles to say that I found none.
    Petri.
    There are two ways howto work with JSON which one you choose is depends on what you belive in:
    1. Use JSON only for layout (no javascript) and put all code into a JS file
    2. Use JSON with behavioral javascript included in JSON
    If you are a beliver of the first one you can use the designer to create you structure and copy it into your code like this:
    PHP Code:
    ... new Ext.Panel(... JSON ..) 
    or you save the json and load it, use index.php will make this easier.
    PHP Code:
    .. new Ext.ux.JsonPanel('url to your json file'
    If you are a beliver of the second option as i am. You put all Behavior Code in the JSON file using the designer and load it using the Ext.ux.JsonPanel. You create only new components if the functionality is so common that it should be implemented in a seperate class.

    Take a look at the desginer.json which is include in the code tree. This json includes other javascript and stylesheet used by the code in the json. With the following html you create a starting page, just replace the designer.json with your own url.
    HTML Code:
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <link rel="shortcut icon" href="icons/favicon.ico" >
     <title>ExtJs Gui Designer</title>
     <!-- The ExtJs base 2.02  -->
         <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <script type="text/javascript" src="js/ext-base.js"></script>
         <script type="text/javascript" src="js/ext-all.js"></script>
    
     <!-- Whe load Gui Designer through used of JSON which includes all needed files  -->
         <script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
     </head>
     <body>
     <script>
       new Ext.Viewport({
         items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
         layout: 'fit'
       }).show();
     </script>
     </body>
    </html>
    So you have now a starting page that is filled by a external json. What you now could do is create a primary json screen which contains a JsonPanel and secondary screens json files which should be autoloaded into the internal panel of the primary json container dynamicly. The easiest way to load a json is just call the load method or using the autoload config option of the JsonPanel with the url.

    Somewhere today i will make an example at http://www.projectspace.nl/index.php which explains these concepts. The designer.json is there allready available and can be a good starting point.

    Sierk

  5. #95
    Ext User
    Join Date
    Apr 2008
    Posts
    18
    Vote Rating
    0
    psavolai is on a distinguished road

      0  

    Default Great.

    Great.


    Thanks Sierk and devnull.

    As Sierk noticed I am a follower of the "second" approach.
    My apps are usually partitioned exactly the way he described:
    - a smallish global-pool of common functionality including a loader that swaps in the handlers of specific datatypes as they are needed.

    ( I have my reasons to do so, believe me)

    >So you have now a starting page that is filled by a external json. What you now could do is >create a primary json screen which contains a JsonPanel and secondary screens json files >which should be autoloaded into the internal panel of the primary json container dynamicly. >The easiest way to load a json is just call the load method or using the autoload config >option of the JsonPanel with the url.

    It's the actual steps for loading and assigning the secondary screens that I'm looking for.

    Pseudocode:
    delete (outerJsonPanel.innerJsonPanel); // to prevent leaks
    outerJsonPanel.innerJsonPanel = new jsonPanel(autoload,url); // suck it in
    outerJsonPanel.doLayout(); // or whatever

    I hope that your working example of dynamic loading will make this clear for me (and others).

    cheers,

    Petri.

  6. #96
    Ext User
    Join Date
    Aug 2007
    Posts
    119
    Vote Rating
    0
    sierk is on a distinguished road

      0  

    Default


    Quote Originally Posted by psavolai View Post
    Thanks Sierk and devnull.

    As Sierk noticed I am a follower of the "second" approach.
    My apps are usually partitioned exactly the way he described:
    - a smallish global-pool of common functionality including a loader that swaps in the handlers of specific datatypes as they are needed.

    ( I have my reasons to do so, believe me)

    >So you have now a starting page that is filled by a external json. What you now could do is >create a primary json screen which contains a JsonPanel and secondary screens json files >which should be autoloaded into the internal panel of the primary json container dynamicly. >The easiest way to load a json is just call the load method or using the autoload config >option of the JsonPanel with the url.

    It's the actual steps for loading and assigning the secondary screens that I'm looking for.

    Pseudocode:
    delete (outerJsonPanel.innerJsonPanel); // to prevent leaks
    outerJsonPanel.innerJsonPanel = new jsonPanel(autoload,url); // suck it in
    outerJsonPanel.doLayout(); // or whatever

    I hope that your working example of dynamic loading will make this clear for me (and others).

    cheers,

    Petri.

    I think you peusdo code is even more easy, but will show it in the demo.
    outerJsonPanel.load('new json file');

    I made a demo, but found out there is a small bug in the json panel that has to be fixed before it works. Code is below just put it in the correct place in Ext.ux.JsonPanel.js

    After you fixed your JsonPanel then create the three json files and add the first into the main index.html (posted before). Take when saving your code keep path in mind i used json/ as a base.

    The demo shows accordion with in each panel a button. Click on them to see the content of center panel change.

    Sierk
    PS: Tonight i will publish this example on the website http://www.projectspace.nl/index.php as example DynamicLoadExample

    PHP Code:
     onRender : function(ctposition){
      
    Ext.ux.JsonPanel.superclass.onRender.call(thisctposition);
      var 
    um this.getUpdater();
      
    um.showLoadIndicator false//disable it.
      
    um.setRenderer({render:
           function(
    elresponseupdatercallback){
          
    //add item configs to the panel layout
            
    var items;
            
    //Load the code to check if we should javascripts
            
    try { items this.decode(response.responseText); } catch (e) {alert('Failed to load JsonPanel:' e)}
            if(
    items){
              if (
    items.window) { 
                
    this.required_css(items.window.required_css);                    
                
    this.required_js(items.window.required_js);
              }
              
    //Now load object again but apply internal code
              
    try { items Ext.decode(response.responseText); } catch (e) {alert('Failed to load JsonPanel:' e)}
              
    delete items.window;
              
    //Clear out orignal content
              
    for (var i=0;i<this.items.items.length;i++) {this.remove(this.items.items[i])};
              if(
    items instanceof Array) {
                
    this.add.apply(this,items);
              } else {
               
    this.add(items);
              }
              
    this.doLayout();
            }
            if(
    callback) {callback();}
          }.
    createDelegate(this)
        });  
      }, 
    Main Json File
    PHP Code:
    {
    xtype:"panel",
    title:"Panel",
    layout:"border",
    window:{
      
    height:500
    },
    items:[{
        
    xtype:"panel",
        
    layout:"accordion",
        
    region:"west",
        
    width:200,
        
    items:[{
            
    title:"Panel 1",
            
    autoHeight:false,
            
    items:[{
                
    xtype:"button",
                
    text:"Load Panel 1",
                
    handler:/*BEGIN*/function(){
     
    Ext.getCmp('JsonPanel').load({urlthis.url});
    }
    /*END*/,
                
    url:"json/JsonPage1.json"
              
    }]
          },{
            
    title:"Panel 2",
            
    autoHeight:false,
            
    items:[{
                
    xtype:"button",
                
    text:"Load Panel 2",
                
    url:"json/JsonPage2.json",
                
    handler:/*BEGIN*/function(){
     
    Ext.getCmp('JsonPanel').load({url :this.url});
    }
    /*END*/
              
    }]
          }]
      },{
        
    xtype:"jsonpanel",
        
    title:"JSON Panel",
        
    layout:"fit",
        
    autoLoad:/*BEGIN*/'json/JsonPage2.json'/*END*/,
        
    region:"center",
        
    id:"JsonPanel"
      
    }]

    JsonPage1.json
    PHP Code:
    {
    xtype:"panel",
    title:"Panel",
    html:"THIS IS PAGE ONE"

    JsonPage2.json
    PHP Code:
    {
    xtype:"panel",
    title:"Panel",
    html:"THIS IS PAGE TWO"


  7. #97
    Ext User
    Join Date
    Apr 2008
    Posts
    18
    Vote Rating
    0
    psavolai is on a distinguished road

      0  

    Default Strange ...

    Strange ...


    Hi Sierk,

    I hate to be nuisance, but this index.html (placed in GuiDesigner1.7 directory)
    only shows white screen. Not the contents of "designer.json".
    Other than that, your example is just what I needed and asked for.

    PHP Code:
    <html>
     <
    head>
     <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <
    link rel="shortcut icon" href="icons/favicon.ico" >
     <
    title>ExtJs Gui Designer</title>
     <!-- 
    The ExtJs base 2.02  -->
         <
    link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <
    script type="text/javascript" src="js/ext-base.js"></script>
         <script type="text/javascript" src="js/ext-all.js"></script>

     <!-- Whe load Gui Designer through used of JSON which includes all needed files  -->
         <script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
     </head>
     <body>
     <script>
       new Ext.Viewport({
         items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
         layout: 'fit'
       }).show();
     </script>
     </body>
    </html> 
    I tried playing with it, but still no luck.
    Maan, I must be stupid or something.


    Petri.

  8. #98
    Ext User
    Join Date
    Aug 2007
    Posts
    119
    Vote Rating
    0
    sierk is on a distinguished road

      0  

    Default


    Quote Originally Posted by psavolai View Post
    Hi Sierk,

    I hate to be nuisance, but this index.html (placed in GuiDesigner1.7 directory)
    only shows white screen. Not the contents of "designer.json".
    Other than that, your example is just what I needed and asked for.

    PHP Code:
    <html>
     <
    head>
     <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <
    link rel="shortcut icon" href="icons/favicon.ico" >
     <
    title>ExtJs Gui Designer</title>
     <!-- 
    The ExtJs base 2.02  -->
         <
    link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <
    script type="text/javascript" src="js/ext-base.js"></script>
         <script type="text/javascript" src="js/ext-all.js"></script>

     <!-- Whe load Gui Designer through used of JSON which includes all needed files  -->
         <script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
     </head>
     <body>
     <script>
       new Ext.Viewport({
         items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
         layout: 'fit'
       }).show();
     </script>
     </body>
    </html> 
    I tried playing with it, but still no luck.
    Maan, I must be stupid or something.


    Petri.
    The designer.json depends on index.php so it won't work in html. Take a look at the http://www.projectspace.nl/index.php
    and open the designer.json. Now you can play with it and see how stuff works.

    Try to use the main.json file a posted earlier instead of designer.json and this should work

    Sierk

  9. #99
    Ext User
    Join Date
    Apr 2008
    Posts
    18
    Vote Rating
    0
    psavolai is on a distinguished road

      0  

    Default Nope

    Nope


    Sorry Sierk,
    but those files do not work.
    I will zip them up and attach so you can try for yourself and see.

    Petri.
    Attached Files

  10. #100
    Ext User
    Join Date
    Aug 2007
    Posts
    119
    Vote Rating
    0
    sierk is on a distinguished road

      0  

    Default


    Quote Originally Posted by psavolai View Post
    Sorry Sierk,
    but those files do not work.
    I will zip them up and attach so you can try for yourself and see.

    Petri.
    Shall we continue by using private messages if you need more help:

    In my session everything works seee http://www.projectspace.nl/main.html. When you fix your names in the main.json files. In main the files are called json/JsonPage1.json and /json/JsonPage2.json while you files are called json/JsonPanel1.json,json/JsonPanel1.json

    So question did you fix the Ext.ux.JsonPanel.js.

    I send you the complete code in a private message.

    Sierk

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar