JavaScript DHTML/Ext JS/BufferView

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

Use Ext.ux.grid.BufferView to hold the 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> <script type="text/javascript" src="ext-3.0.0/examples/ux/BufferView.js"></script> 

 <style type="text/css">
 .x-grid3-td-topic b {
     font-family:tahoma, verdana;
     display:block;
   overflow:hidden;
   width:98%;
   text-overflow:ellipsis;
 }
 .x-grid3-td-topic b i {
     font-weight:normal;
     font-style: normal;
     color:#000;
   overflow:hidden;
   text-overflow:ellipsis;
 }
 .x-grid3-td-topic .x-grid3-cell-inner {
     white-space: nowrap;
 }
 </style>

</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 store = new Ext.data.Store({
       remoteSort: true,
       baseParams: {lightWeight:true,ext: "js"},
       sortInfo: {field:"lastpost", direction:"DESC"},
       autoLoad: {params:{start:0, limit:500}},
       proxy: new Ext.data.ScriptTagProxy({
           url: "http://extjs.ru/forum/topics-browse-remote.php"
       }),
       reader: new Ext.data.JsonReader({
           root: "topics",
           totalProperty: "totalCount",
           idProperty: "threadid",
           fields: [
               "title", "forumtitle", "forumid", "author",
               {name: "replycount", type: "int"},
               {name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
               "lastposter", "excerpt"
           ]
       })
   });
   var grid = new Ext.grid.GridPanel({
       renderTo: "topic-grid",
       width:700,
       height:500,
       frame:true,
       title:"ExtJS.ru - Browse Forums",
       trackMouseOver:false,
   autoExpandColumn: "topic",
       store: store,
       columns: [new Ext.grid.RowNumberer({width: 30}),{
           id: "topic",
           header: "Topic",
           dataIndex: "title",
           width: 420,
           renderer: renderTopic,
           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
       }],
     bbar: new Ext.PagingToolbar({
       store: store,
       pageSize:500,
       displayInfo:true
     }),
     view: new Ext.ux.grid.BufferView({
       // custom row height
       rowHeight: 34,
       // render rows as they come into viewable area.
       scrollDelay: false
     })
   });

   // render functions
   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"]);
   }

});

</script>

</body> </html> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/BufferView&oldid=2305»