JavaScript DHTML/Ext JS/ScriptTagProxy

Материал из Web эксперт
Перейти к: навигация, поиск

Setup Ext.data.Store and new Ext.data.ScriptTagProxy

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/SearchField.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   var ds = new Ext.data.Store({
       proxy: new Ext.data.ScriptTagProxy({
           url: "http://extjs.ru/forum/topics-remote.php"
       }),
       reader: new Ext.data.JsonReader({
           root: "topics",
           totalProperty: "totalCount",
           id: "post_id"
       }, [
           {name: "postId", mapping: "post_id"},
           {name: "title", mapping: "topic_title"},
           {name: "topicId", mapping: "topic_id"},
           {name: "author", mapping: "author"},
           {name: "lastPost", mapping: "post_time", type: "date", dateFormat: "timestamp"},
           {name: "excerpt", mapping: "post_text"}
       ]),
       baseParams: {limit:20, forumId: 4}
   });
   // Custom rendering Template for the View
   var resultTpl = new Ext.XTemplate(
       "<tpl for=".">",
"
", "

{lastPost:date("M j, Y")}
by {author}
", "<a href="http://extjs.ru/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a>

", "

{excerpt}

", "
</tpl>"
   );
   var panel = new Ext.Panel({
       applyTo: "search-panel",
       title:"Forum Search",
       height:300,
       autoScroll:true,
       items: new Ext.DataView({
           tpl: resultTpl,
           store: ds,
           itemSelector: "div.search-item"
       }),
       tbar: [
           "Search: ", " ",
           new Ext.ux.form.SearchField({
               store: ds,
               width:320
           })
       ],
       bbar: new Ext.PagingToolbar({
           store: ds,
           pageSize: 20,
           displayInfo: true,
           displayMsg: "Topics {0} - {1} of {2}",
           emptyMsg: "No topics to display"
       })
   });
   ds.load({params:{start:0, limit:20, forumId: 4}});

}); </script>

</body> </html>


 </source>
   
  


Use a ScriptTagProxy to fetch cross-domain remote data

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   // create the Data Store
   var store = new Ext.data.JsonStore({
       root: "topics",
       totalProperty: "totalCount",
       idProperty: "threadid",
       remoteSort: true,
       fields: [
           "title", "forumtitle", "forumid", "author",
           {name: "replycount", type: "int"},
           {name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
           "lastposter", "excerpt"
       ],
       // load using script tags for cross domain, if the data in on the same domain as
       // this page, an HttpProxy would be better
       proxy: new Ext.data.ScriptTagProxy({
           url: "http://extjs.ru/forum/topics-browse-remote.php"
       })
   });
   store.setDefaultSort("lastpost", "desc");
   // pluggable renders
   function renderTopic(value, p, record){
       return String.format(
               "<a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a><a href="http://extjs.ru/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>",
               value, record.data.forumtitle, record.id, record.data.forumid);
   }
   function renderLast(value, p, r){
       return String.format("{0}
by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]); } var grid = new Ext.grid.GridPanel({ width:700, height:500, title:"ExtJS.ru - Browse Forums", store: store, trackMouseOver:false, disableSelection:true, loadMask: true, // grid columns columns:[{ id: "topic", // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "Topic", dataIndex: "title", width: 420, renderer: renderTopic, sortable: true },{ header: "Author", dataIndex: "author", width: 100, hidden: true, sortable: true },{ header: "Replies", dataIndex: "replycount", width: 70, align: "right", sortable: true },{ id: "last", header: "Last Post", dataIndex: "lastpost", width: 150, renderer: renderLast, sortable: true }], // customize view config viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ if(this.showPreview){
p.body = "

"+record.data.excerpt+"

";
                   return "x-grid3-row-expanded";
               }
               return "x-grid3-row-collapsed";
           }
       },
       // paging bar on the bottom
       bbar: new Ext.PagingToolbar({
           pageSize: 25,
           store: store,
           displayInfo: true,
           displayMsg: "Displaying topics {0} - {1} of {2}",
           emptyMsg: "No topics to display",
           items:[
               "-", {
               pressed: true,
               enableToggle:true,
               text: "Show Preview",
               cls: "x-btn-text-icon details",
               toggleHandler: function(btn, pressed){
                   var view = grid.getView();
                   view.showPreview = pressed;
                   view.refresh();
               }
           }]
       })
   });
   // render it
   grid.render("topic-grid");
   // trigger the data store load
   store.load({params:{start:0, limit:25}});

}); </script>

</body> </html>


 </source>