JavaScript DHTML/Ext JS/Pageable

Содержание

1 Combine paging, Ext.Template and a remote data store to create a "live search" feature.
- 1.1 Search the Ext Forums
- 1.2 {lastPost:date("M j, Y")}by {author}{title}
2 Create a grid with paging
3 Pageable table
4 Progress Bar Pager Extension
5 Sliding Pager Extension

Combine paging, Ext.Template and a remote data store to create a "live search" feature.

   <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>

Search the Ext Forums

       <input type="text" size="40" name="search" id="search" />

           Live search requires a minimum of 4 characters.

</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: "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"}
       ])
   });
   // Custom rendering Template
   var resultTpl = new Ext.XTemplate(

"<tpl for=".">

", "

{lastPost:date("M j, Y")}
by {author}{title}

",

           "{excerpt}",

"

</tpl>"

   );
   
   var search = new Ext.form.ruboBox({
       store: ds,
       displayField:"title",
       typeAhead: false,
       loadingText: "Searching...",
       width: 570,
       pageSize:10,
       hideTrigger:true,
       tpl: resultTpl,
       applyTo: "search",
       itemSelector: "div.search-item",
       onSelect: function(record){ // override default onSelect to do redirect
           window.location =
               String.format("http://extjs.ru/forum/showthread.php?t={0}&p={1}", record.data.topicId, record.id);
       }
   });

}); </script> </div> </body> </html>

 </source>

Create a grid with paging

   <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>

Pageable table

   <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
*/

// A DropZone which cooperates with DragZones whose dragData contains // a "field" property representing a form Field. Fields may be dropped onto // grid data cells containing a matching data type. Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, {

   constructor: function(){},

// Call the DropZone constructor using the View"s scrolling element // only after the grid has been rendered.

   init: function(grid) {
       if (grid.rendered) {
           this.grid = grid;
           this.view = grid.getView();
           this.store = grid.getStore();
           Ext.ux.CellFieldDropZone.superclass.constructor.call(this, this.view.scroller);
       } else {
           grid.on("render", this.init, this);
       }
   },

// Scroll the main configured Element when we drag close to the edge

   containerScroll: true,
   getTargetFromEvent: function(e) {

// Ascertain whether the mousemove is within a grid cell

       var t = e.getTarget(this.view.cellSelector);
       if (t) {

// We *are* within a grid cell, so ask the View exactly which one, // Extract data from the Model to create a target object for // processing in subsequent onNodeXXXX methods. Note that the target does // not have to be a DOM element. It can be whatever the noNodeXXX methods are // programmed to expect.

           var rowIndex = this.view.findRowIndex(t);
           var columnIndex = this.view.findCellIndex(t);
           if ((rowIndex !== false) && (columnIndex !== false)) {
               return {
                   node: t,
                   record: this.store.getAt(rowIndex),
                   fieldName: this.grid.getColumnModel().getDataIndex(columnIndex)
               }
           }
       }
   },

// On Node enter, see if it is valid for us to drop the field on that type of column.

   onNodeEnter: function(target, dd, e, dragData) {
       delete this.dropOK;
       if (!target) {
           return;
       }

// Check that a field is being dragged.

       var f = dragData.field;
       if (!f) {
           return;
       }

// Check whether the data type of the column being dropped on accepts the // dragged field type. If so, set dropOK flag, and highlight the target node.

       var type = target.record.fields.get(target.fieldName).type;
       switch (type) {
           case "float":
           case "int":
               if (!f.isXType("numberfield")) {
                   return;
               }
               break;
           case "date":
               if (!f.isXType("datefield")) {
                   return;
               }
               break;
           case "boolean":
               if (!f.isXType("checkbox")) {
                   return;
               }
       }
       this.dropOK = true;
       Ext.fly(target.node).addClass("x-drop-target-active");
   },

// Return the class name to add to the drag proxy. This provides a visual indication // of drop allowed or not allowed.

   onNodeOver: function(target, dd, e, dragData) {
       return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
   },

// nhighlight the target node.

   onNodeOut: function(target, dd, e, dragData) {
       Ext.fly(target.node).removeClass("x-drop-target-active");
   },

// Process the drop event if we have previously ascertained that a drop is OK.

   onNodeDrop: function(target, dd, e, dragData) {
       if (this.dropOK) {
           target.record.set(target.fieldName, dragData.field.getValue());
           return true;
       }
   }

}); // A class which makes Fields within a Panel draggable. // the dragData delivered to a coooperating DropZone"s methods contains // the dragged Field in the property "field". Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, {

   constructor: function(){},

// Call the DRagZone"s constructor. The Panel must have been rendered.

   init: function(panel) {
       if (panel.nodeType) {
           Ext.ux.PanelFieldDragZone.superclass.init.apply(this, arguments);
       } else {
           if (panel.rendered) {
               Ext.ux.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());
               var i = Ext.fly(panel.getEl()).select("input");
               i.unselectable();
           } else {
               panel.on("afterlayout", this.init, this, {single: true});
           }
       }
   },
   scroll: false,

// On mousedown, we ascertain whether it is on one of our draggable Fields. // If so, we collect data about the draggable object, and return a drag data // object which contains our own data, plus a "ddel" property which is a DOM // node which provides a "view" of the dragged data.

   getDragData: function(e) {
       var t = e.getTarget("input");
       if (t) {
           e.stopEvent();

// Ugly code to "detach" the drag gesture from the input field. // Without this, Opera never changes the mouseover target from the input field // even when dragging outside of the field - it just keeps selecting.

           if (Ext.isOpera) {
               Ext.fly(t).on("mousemove", function(e1){
                   t.style.visibility = "hidden";
                   (function(){
                       t.style.visibility = "";
                   }).defer(1);
               }, null, {single:true});
           }

// Get the data we are dragging: the Field // create a ddel for the drag proxy to display

           var f = Ext.getCmp(t.id);
           var d = document.createElement("div");
           d.className = "x-form-text";
           d.appendChild(document.createTextNode(t.value));
           Ext.fly(d).setWidth(f.getEl().getWidth());
           return {
               field: f,
               ddel: d
           };
       }
   },

// The coordinates to slide the drag proxy back to on failed drop.

   getRepairXY: function() {
       return this.dragData.field.getEl().getXY();
   }

}); Ext.onReady(function(){

   var myData = [
       ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
       ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
       ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
       ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
       ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
       ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
       ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
       ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
       ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
       ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
       ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
       ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
       ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
       ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
       ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
       ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
       ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
       ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
       ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
       ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
       ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
       ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
       ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
       ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
       ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
       ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
       ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
       ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
       ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
   ];
   // example of custom renderer function
   function change(val){
       if(val > 0){
           return "" + val + "";
       }else if(val < 0){
           return "" + val + "";
       }
       return val;
   }
   // example of custom renderer function
   function pctChange(val){
       if(val > 0){
           return "" + val + "%";
       }else if(val < 0){
           return "" + val + "%";
       }
       return val;
   }
   // create the data store
   var store = new Ext.data.ArrayStore({
       fields: [
          {name: "company"},
          {name: "price", type: "float"},
          {name: "change", type: "float"},
          {name: "pctChange", type: "float"},
          {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
       ]
   });
   store.loadData(myData);
   
   var helpWindow = new Ext.Window({
       title: "Source code",
       width: 920,
       height: 500,
       closeAction: "hide",
       bodyCfg: {tag: "textarea", readonly: true},
       bodyStyle: {
           backgroundColor: "white",
           margin: "0px",
           border: "0px none"
       },
       listeners: {
           render: function(w) {
               Ext.Ajax.request({
                   url: "field-to-grid-dd.js",
                   success: function(r) {
                       w.body.dom.value = r.responseText;
                   }
               });
           }
       }
   });
   // create the Grid
   var grid = new Ext.grid.GridPanel({
       store: store,
       columns: [
           {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
           {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
           {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
           {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
           {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
       ],
       plugins: new Ext.ux.CellFieldDropZone(),
       stripeRows: true,
       autoExpandColumn: "company",
       height:350,
       width:600,
       title:"Array Grid",
       bbar: new Ext.PagingToolbar({
           buttons: [{
               text: "View Source",
               handler: function() {
                   helpWindow.show();
               }
           }],
           store: store,
           pageSize: 25
       })
   });
   grid.render("grid-example");
   grid.getSelectionModel().selectFirstRow();
   var f = new Ext.Panel({
       frame: true,
       layout: "form",
       width: 600,
       plugins: new Ext.ux.PanelFieldDragZone(),
       style: {
           "margin-top": "10px"
       },
       labelWidth: 150,
       items: [{
           xtype: "textfield",
           fieldLabel: "Drag this text",
           value: "test"
       },{
           xtype: "numberfield",
           fieldLabel: "Drag this number",
           value: "1.2"
       },{
           xtype: "datefield",
           fieldLabel: "Drag this date",
           value: new Date()
       }],
       renderTo: Ext.getBody()
   });

}); </script>

</body> </html>

 </source>

Progress Bar Pager Extension

   <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>

   <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/PanelResizer.css" />
   <script type="text/javascript" src="ext-3.0.0/examples/ux/ProgressBarPager.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/PanelResizer.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/PagingMemoryProxy.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 myData = [
       ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
       ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
       ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
       ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
       ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
       ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
       ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
       ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
       ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
       ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
       ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
       ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
       ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
       ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
       ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
       ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
       ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
       ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
       ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
       ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
       ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
       ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
       ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
       ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
       ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
       ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
       ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
       ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
       ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
   ];
   // example of custom renderer function
   function change(val){
       if(val > 0){
           return "" + val + "";
       }else if(val < 0){
           return "" + val + "";
       }
       return val;
   }
   // example of custom renderer function
   function pctChange(val){
       if(val > 0){
           return "" + val + "%";
       }else if(val < 0){
           return "" + val + "%";
       }
       return val;
   }
   // create the data store
   var store = new Ext.data.Store({
       proxy: new Ext.ux.data.PagingMemoryProxy(myData),
       remoteSort:true,
       sortInfo: {field:"price", direction:"ASC"},
       reader: new Ext.data.ArrayReader({
           fields: [
              {name: "company"},
              {name: "price", type: "float"},
              {name: "change", type: "float"},
              {name: "pctChange", type: "float"},
              {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
           ]
       })
   });
   // create the Grid
   var grid = new Ext.grid.GridPanel({
       store: store,
       columns: [
           {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
           {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
           {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
           {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
           {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
       ],
       stripeRows: true,
       autoExpandColumn: "company",
       height:320,
       width:600,
       frame:true,
       title:"Sliding Pager",
       plugins: new Ext.ux.PanelResizer({
           minHeight: 100
       }),
       bbar: new Ext.PagingToolbar({
           pageSize: 10,
           store: store,
           displayInfo: true,
           plugins: new Ext.ux.ProgressBarPager()
       })
   });
   grid.render("grid-example");
   store.load({params:{start:0, limit:10}});

}); </script>

</body> </html>

 </source>

Sliding Pager Extension

   <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/SlidingPager.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/PanelResizer.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/PagingMemoryProxy.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 myData = [
       ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
       ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
       ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
       ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
       ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
       ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
       ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
       ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
       ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
       ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
       ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
       ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
       ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
       ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
       ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
       ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
       ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
       ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
       ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
       ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
       ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
       ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
       ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
       ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
       ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
       ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
       ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
       ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
       ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
   ];
   // example of custom renderer function
   function change(val){
       if(val > 0){
           return "" + val + "";
       }else if(val < 0){
           return "" + val + "";
       }
       return val;
   }
   // example of custom renderer function
   function pctChange(val){
       if(val > 0){
           return "" + val + "%";
       }else if(val < 0){
           return "" + val + "%";
       }
       return val;
   }
   // create the data store
   var store = new Ext.data.Store({
       proxy: new Ext.ux.data.PagingMemoryProxy(myData),
       remoteSort:true,
       sortInfo: {field:"price", direction:"ASC"},
       reader: new Ext.data.ArrayReader({
           fields: [
              {name: "company"},
              {name: "price", type: "float"},
              {name: "change", type: "float"},
              {name: "pctChange", type: "float"},
              {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
           ]
       })
   });
   // create the Grid
   var grid = new Ext.grid.GridPanel({
       store: store,
       columns: [
           {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
           {header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
           {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
           {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
           {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
       ],
       stripeRows: true,
       autoExpandColumn: "company",
       height:320,
       width:600,
       frame:true,
       title:"Sliding Pager",
       plugins: new Ext.ux.PanelResizer({
           minHeight: 100
       }),
       bbar: new Ext.PagingToolbar({
           pageSize: 10,
           store: store,
           displayInfo: true,
           plugins: new Ext.ux.SlidingPager()
       })
   });
   grid.render("grid-example");
   store.load({params:{start:0, limit:10}});

}); </script>

</body>

</html>

 </source>

JavaScript DHTML/Ext JS/Pageable

Содержание

Combine paging, Ext.Template and a remote data store to create a "live search" feature.

Search the Ext Forums

{lastPost:date("M j, Y")}
by {author}{title}

Create a grid with paging

Pageable table

Progress Bar Pager Extension

Sliding Pager Extension

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

JavaScript DHTML/Ext JS/Pageable

Содержание

Combine paging, Ext.Template and a remote data store to create a "live search" feature.

Search the Ext Forums

{lastPost:date("M j, Y")}by {author}{title}

Create a grid with paging

Pageable table

Progress Bar Pager Extension

Sliding Pager Extension

Навигация

Поиск

{lastPost:date("M j, Y")}
by {author}{title}