Changeset 18478 for lang

Show
Ignore:
Timestamp:
08/30/08 20:35:00 (6 years ago)
Author:
stomita
Message:

Added JSONP directory support (http://wedata.net/databases/JSONP%20Directory)

Location:
lang/javascript/jsonptester/trunk
Files:
427 added
1 removed
2 modified

Legend:

Unmodified
Added
Removed
  • lang/javascript/jsonptester/trunk/js/jsonptester.js

    r8428 r18478  
    11Ext.onReady(function () { 
    22 
     3  var requestForm = { 
     4    id : 'requestForm', 
     5    xtype : 'form', 
     6    title : 'Request', 
     7    frame : true, 
     8    autoHeight : true, 
     9    defaultType : 'textfield', 
     10    labelWidth : 150, 
     11    items : [{  
     12      name : 'url', fieldLabel : 'JSONP Service URL', anchor : '100%'  
     13    }, { 
     14      xtype : 'fieldset', 
     15      title : 'Optional Parameters', 
     16      collapsible : true, 
     17      collapsed : true, 
     18      autoHeight : true, 
     19      items : [{ 
     20        xtype : 'textfield', 
     21        name : 'callbackParam',  
     22        fieldLabel : 'Callback Parameter Name', 
     23        value : 'callback'  
     24      }, { 
     25        xtype : 'numberfield', 
     26        name : 'timeout',  
     27        fieldLabel : 'Timeout (msec)', 
     28        value : 15000  
     29      }, { 
     30        xtype : 'checkbox', 
     31        name : 'nocache',  
     32        fieldLabel : 'Append No Cache Param', 
     33        checked : true 
     34      }, { 
     35        xtype : 'checkbox', 
     36        name : 'staticCallback',  
     37        fieldLabel : 'Use Static Callback', 
     38        checked : false 
     39      }, { 
     40        xtype : 'textfield', 
     41        name : 'callbackFuncName',  
     42        width : 200, 
     43        disabled : true, 
     44        fieldLabel : 'Callback Function' 
     45      }] 
     46    }], 
     47    buttons : [{ 
     48      text : 'Request', 
     49      handler : function(btn) { requestJSONP(btn.ownerCt.getForm().getValues()) } 
     50    }] 
     51  }; 
     52 
     53  var directoryPanel = { 
     54    id : 'directoryPanel', 
     55    title : 'Directory', 
     56    frame : true, 
     57    autoHeight : true, 
     58    layout : 'column', 
     59    defaults : { columnWidth : .5 }, 
     60    items : [{ 
     61      border : true, 
     62      tbar : ['Filter', { 
     63        xtype : 'textfield', 
     64        width : 200, 
     65        enableKeyEvents : true, 
     66        listeners : { 
     67          keyup : function(field) {  
     68            var v = field.getValue().toUpperCase(); 
     69            var grid = Ext.getCmp('directoryGrid'); 
     70            grid.getStore().filterBy(function(record) { 
     71              return record.get('name').toUpperCase().indexOf(v)>=0; 
     72            }); 
     73          } 
     74        } 
     75      }], 
     76      autoHeight : true, 
     77      layout : 'anchor', 
     78      items : { 
     79        xtype : 'grid', 
     80        id : 'directoryGrid', 
     81        height : 200, 
     82        autoScroll : true, 
     83        hideHeaders : true, 
     84        store : new Ext.data.JsonStore({ 
     85          proxy : new Ext.data.ScriptTagProxy({ 
     86            url : 'http://wedata.net/databases/JSONP%20Directory/items.json' 
     87          }), 
     88          fields : ['name','created_by','resource_url','data'] 
     89        }), 
     90        columns : [ 
     91          { header : 'Name', dataIndex : 'name' }, 
     92        ], 
     93        viewConfig : { forceFit : true }, 
     94        loadMask : true, 
     95        selModel : new Ext.grid.RowSelectionModel({ 
     96          listeners : { 
     97            rowselect : function(sm, index, record) { renderDirectoryForm(record.data) } 
     98          } 
     99        }), 
     100        listeners : { 
     101          render : function(grid) { grid.getStore().load(); grid.doLayout() }, 
     102        } 
     103      } 
     104    }, { 
     105      id : 'directoryFormWrapper', 
     106    }] 
     107  }; 
     108 
     109  var requestTab = { 
     110    xtype : 'tabpanel', 
     111    id : 'requestTab', 
     112    border : false, 
     113    activeItem : 0, 
     114    autoHeight : true, 
     115    items : [ requestForm, directoryPanel ] 
     116  }; 
     117 
     118  var requestResult = { 
     119    id : 'resultArea', 
     120    title : 'JSONP Result', 
     121    layout : 'border', 
     122    height : 400, 
     123    items : [{ 
     124      id : 'resultContainer', 
     125      region : 'center', 
     126      border : false, 
     127      layout : 'fit' 
     128    }, { 
     129      id : 'resultDump', 
     130      region : 'east', 
     131      title : 'JSON Dump', 
     132      width : '200', 
     133      collapsible : true, 
     134      split : true, 
     135      html : '<textarea id="dumparea" style="width:100%;height:100%;"></textarea>' 
     136    }] 
     137  }; 
     138 
     139   
    3140  // main window 
    4141  var win = new Ext.Window({ 
    5     width : 800, 
     142    width : 800,  
    6143    title : 'JSONP Tester (powered by Ext JS & jQuery)', 
    7144    border : false, 
     
    9146    closable : false, 
    10147    layout : 'anchor', 
    11     defaults : { anchor : '100%' }, 
    12     items : [{ 
    13       id : 'jsonpForm', 
    14       xtype : 'form', 
    15       title : 'JSONP Parameters', 
    16       frame : true, 
    17       defaultType : 'textfield', 
    18       labelWidth : 150, 
    19       items : [{  
    20         name : 'url', fieldLabel : 'JSONP Service URL', anchor : '100%'  
    21       }, { 
    22         xtype : 'fieldset', 
    23         title : 'Optional Parameters', 
    24         collapsible : true, 
    25         collapsed : true, 
    26         autoHeight : true, 
    27         items : [{ 
    28           xtype : 'textfield', 
    29           name : 'callbackParam',  
    30           fieldLabel : 'Callback Parameter Name', 
    31           value : 'callback'  
    32         }, { 
    33           xtype : 'numberfield', 
    34           name : 'timeout',  
    35           fieldLabel : 'Timeout (msec)', 
    36           value : 15000  
    37         }, { 
    38           xtype : 'checkbox', 
    39           name : 'nocache',  
    40           fieldLabel : 'Append No Cache Param', 
    41           checked : true 
    42         }, { 
    43           xtype : 'checkbox', 
    44           name : 'staticCallback',  
    45           fieldLabel : 'Use Static Callback', 
    46           checked : false 
    47         }, { 
    48           xtype : 'textfield', 
    49           name : 'callbackFuncName',  
    50           width : 200, 
    51           disabled : true, 
    52           fieldLabel : 'Callback Function' 
    53         }] 
    54       }], 
    55       buttons : [{ 
    56         text : 'Request', 
    57         handler : requestJSONP 
    58       }] 
    59     }, { 
    60       id : 'resultArea', 
    61       title : 'JSONP Result', 
    62       layout : 'border', 
    63       height : 400, 
    64       items : [{ 
    65         id : 'resultContainer', 
    66         region : 'center', 
    67         border : false, 
    68         layout : 'fit' 
    69       }, { 
    70         id : 'resultDump', 
    71         region : 'east', 
    72         title : 'JSON Dump', 
    73         width : '200', 
    74         collapsible : true, 
    75         split : true, 
    76         html : '<textarea id="dumparea" style="width:100%;height:100%;"></textarea>' 
    77       }] 
    78     }]  
     148    items : { 
     149      layout : 'anchor', 
     150      defaults : { anchor : '100%' }, 
     151      items : [ requestTab, requestResult ] 
     152    } 
    79153  }); 
     154 
    80155 
    81156  // toggling static callback and dynamic parameter passing callback 
     
    90165  win.show(); 
    91166 
    92   var form = Ext.getCmp('jsonpForm').getForm(); 
     167  var requestForm = Ext.getCmp('requestForm').getForm(); 
    93168  var resultContainer = Ext.getCmp('resultContainer'); 
    94169  // JSONP parameters can be sent from outside via url hash. 
     
    108183      options.callbackParam = m[1]; 
    109184    } 
    110     form.setValues(options); 
     185    requestForm.setValues(options); 
    111186  } 
    112187 
     
    115190  var resultTree; 
    116191 
    117   function requestJSONP() { 
     192  function requestJSONP(values) { 
    118193    // remove resulttree if already created; 
    119194    if (resultTree) { 
     
    121196      resultTree = null; 
    122197    } 
    123  
    124     var values = form.getValues(); 
    125198 
    126199    resultTree = resultContainer.add({ 
     
    150223  } 
    151224 
     225  function renderDirectoryForm(rec) { 
     226    var data = rec.data; 
     227    var url = data.url; 
     228  
     229    var wrapper = Ext.getCmp('directoryFormWrapper'); 
     230    if (wrapper.items) wrapper.items.each(function(item) { wrapper.remove(item, true) }); 
     231    wrapper.add({ 
     232      title : data.name, 
     233      xtype : 'form', 
     234      id : 'directoryForm', 
     235      bodyStyle : 'margin:10px', 
     236      defaults : { anchor : '100%' }, 
     237      items : createFields(rec), 
     238      buttons : [{ 
     239        text : 'Create JSONP Request URL', 
     240        handler : function() {  
     241          requestForm.setValues(getJSONPValues()); 
     242          var requestTab = Ext.getCmp('requestTab'); 
     243          requestTab.setActiveTab('requestForm'); 
     244        } 
     245      }] 
     246    }); 
     247    wrapper.doLayout(); 
     248 
     249    function createFields(rec) { 
     250     var params = []; 
     251      url.replace(/\{([^\}]+)\}/g, function($1,$2) { params.push($2) }); 
     252      return $.map(params, function(paramName) { 
     253        var type = data[paramName+':datatype'] || 'string'; 
     254        return { 
     255          xtype : type=='integer' || type=='float' ? 'numberfield' : 'textfield', 
     256          fieldLabel : data[paramName+':label'] || paramName, 
     257          name : paramName, 
     258          value : data[paramName+':default'] || '' 
     259        } 
     260      }); 
     261    } 
     262 
     263    function getJSONPValues() { 
     264      var values = Ext.getCmp('directoryForm').getForm().getValues(); 
     265      return { 
     266        url : url.replace(/\{([^\}]+)\}/g, function($1, $2) { 
     267          var v = values[$2] || ''; 
     268          return data[$2+':encodeURI'] ? encodeURIComponent(v) : v; 
     269        }), 
     270        callbackParam : data.jsonpParam 
     271      }; 
     272    } 
     273  } 
     274 
    152275/** 
    153276 * @class AsyncLoader 
  • lang/javascript/jsonptester/trunk/jsonptester.html

    r6720 r18478  
    55    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    66    <title>JSONP Tester (powered by Ext JS)</title> 
    7     <link rel="stylesheet" type="text/css" href="./ext-2.0.1/resources/css/ext-all.css" /> 
    8     <script type="text/javascript" src="./jquery/jquery.js"></script> 
    9     <script type="text/javascript" src="./ext-2.0.1/adapter/jquery/jquery-plugins.js"></script> 
    10     <script type="text/javascript" src="./ext-2.0.1/adapter/jquery/ext-jquery-adapter.js"></script> 
    11     <script type="text/javascript" src="./ext-2.0.1/ext-all.js"></script> 
     7    <link rel="stylesheet" type="text/css" href="./ext-2.2/resources/css/ext-all.css" /> 
     8    <script type="text/javascript" src="./ext-2.2/adapter/jquery/jquery.js"></script> 
     9    <script type="text/javascript" src="./ext-2.2/adapter/jquery/ext-jquery-adapter.js"></script> 
     10    <script type="text/javascript" src="./ext-2.2/ext-all.js"></script> 
    1211    <script type="text/javascript" src="./js/jsonptester.js"></script> 
    1312  </head>