JavaScript DHTML/Ext JS/Store — различия между версиями

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

Версия 12:59, 26 мая 2010

Load a grid with XML 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.Store({
       // load using HTTP
       url: "ext-3.0.0/examples/grid/sheldon.xml",
       // the return will be XML, so lets set up a reader
       reader: new Ext.data.XmlReader({
              // records will have an "Item" tag
              record: "Item",
              id: "ASIN",
              totalRecords: "@total"
          }, [
              // set up the fields mapping into the xml doc
              // The first needs mapping, the others are very basic
              {name: "Author", mapping: "ItemAttributes > Author"},
              "Title", "Manufacturer", "ProductGroup"
          ])
   });
   // create the grid
   var grid = new Ext.grid.GridPanel({
       store: store,
       columns: [
           {header: "Author", width: 120, dataIndex: "Author", sortable: true},
           {header: "Title", width: 180, dataIndex: "Title", sortable: true},
           {header: "Manufacturer", width: 115, dataIndex: "Manufacturer", sortable: true},
           {header: "Product Group", width: 100, dataIndex: "ProductGroup", sortable: true}
       ],
       renderTo:"example-grid",
       width:540,
       height:200
   });
   store.load();

});

</script>

</body>

</html> 


 </source>


Server Json reader based Store

   <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.onReady(function() { 

       var values = new Ext.data.Store({
           reader: new Ext.data.JsonReader({
               fields: ["id", "name"],
               root: "rows"
           }),
           proxy: new Ext.data.HttpProxy({
               url: "data.php"
           }),
           autoLoad: true
       });
       
   new Ext.FormPanel({ 
     url: "your.php",
     renderTo: Ext.getBody(),
     frame: true,
     title: "Title",
     width: 550,
     items: [ 
               {
           xtype: "combo",
           name: "value",
           fieldLabel: "Value",
           mode: "local",
           store: values,
           displayField:"name",
                   valueField: "id",
           width: 130
         }
     ]
   });

}); </script>

asdf

</body> </html> 


 </source>


Set sortInfo for Ext.data.Store

   <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/CheckColumn.js"></script> <style type="text/css"> /*! 

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
  1. grid-example .x-grid-col-1 {
 text-align: right;

}

  1. grid-example .x-grid-col-2{
 text-align: right;

}

  1. grid-example .x-grid-col-3 {
 text-align: right;

}

  1. grid-example .x-grid-col-4 {
 text-align: right;

}

  1. grid-example.x-grid-mso{
 border: 1px solid #6593cf;

}

  1. grid-example.x-grid-vista{
 border: 1px solid #b3bcc0;

}

  1. xml-grid-example{
 border: 1px solid #cbc7b8;
 left: 0;
 position: relative;
 top: 0;

}

  1. editor-grid .x-grid-col-2{
   text-align:right;

} .x-grid3-td-topic b { 

   font-family:tahoma, verdana;
   display:block;

} .x-grid3-td-topic b i { 

   font-weight:normal;
   font-style: normal;
   color:#000;

} .x-grid3-td-topic .x-grid3-cell-inner { 

   white-space:normal;

} .x-grid3-td-topic a { 

   color: #385F95;
   text-decoration:none;

} .x-grid3-td-topic a:hover { 

   text-decoration:underline;

} .details .x-btn-text { 

   background-image: url(details.gif);

} .x-resizable-pinned .x-resizable-handle-south{ 

   background:url(ext-3.0.0/resources/images/default/sizer/s-handle-dark.gif);
   background-position: top;

} 

 </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(){ 

   Ext.QuickTips.init();
   function formatDate(value){
       return value ? value.dateFormat("M d, Y") : "";
   }
   // shorthand alias
   var fm = Ext.form;
   // custom column plugin example
   var checkColumn = new Ext.grid.CheckColumn({
      header: "Indoor?",
      dataIndex: "indoor",
      width: 55
   });
   // the column model has information about grid columns
   // dataIndex maps the column to the specific data field in
   // the data store (created below)
   var cm = new Ext.grid.ColumnModel([{
          id: "common",
          header: "Common Name",
          dataIndex: "common",
          width: 220,
          // use shorthand alias defined above
          editor: new fm.TextField({
              allowBlank: false
          })
       },{
          header: "Light",
          dataIndex: "light",
          width: 130,
          editor: new fm.ruboBox({
              typeAhead: true,
              triggerAction: "all",
              transform:"light",
              lazyRender: true,
              listClass: "x-combo-list-small"
           })
       },{
          header: "Price",
          dataIndex: "price",
          width: 70,
          align: "right",
          renderer: "usMoney",
          editor: new fm.NumberField({
              allowBlank: false,
              allowNegative: false,
              maxValue: 100000
          })
       },{
          header: "Available",
          dataIndex: "availDate",
          width: 95,
          renderer: formatDate,
          editor: new fm.DateField({
               format: "m/d/y",
               minValue: "01/01/06",
               disabledDays: [0, 6],
               disabledDaysText: "Plants are not available on the weekends"
           })
       },
       checkColumn
   ]);
   // by default columns are sortable
   cm.defaultSortable = true;
   // create the Data Store
   var store = new Ext.data.Store({
       // load remote data using HTTP
       url: "ext-3.0.0/examples/grid/plants.xml",
       // specify a XmlReader (coincides with the XML format of the returned data)
       reader: new Ext.data.XmlReader(
           {
               // records will have a "plant" tag
               record: "plant"
           },
           // use an Array of field definition objects to implicitly create a Record constructor
           [
               // the "name" below matches the tag name to read, except "availDate"
               // which is mapped to the tag "availability"
               {name: "common", type: "string"},
               {name: "botanical", type: "string"},
               {name: "light"},
               {name: "price", type: "float"},             
               // dates can be automatically converted by specifying dateFormat
               {name: "availDate", mapping: "availability", type: "date", dateFormat: "m/d/Y"},
               {name: "indoor", type: "bool"}
           ]
       ),
       sortInfo: {field:"common", direction:"ASC"}
   });
   // create the editor grid
   var grid = new Ext.grid.EditorGridPanel({
       store: store,
       cm: cm,
       renderTo: "editor-grid",
       width: 600,
       height: 300,
       autoExpandColumn: "common",
       title: "Edit Plants?",
       frame: true,
       plugins: checkColumn,
       clicksToEdit: 1,
       tbar: [{
           text: "Add Plant",
           handler : function(){
               // access the Record constructor through the grid"s store
               var Plant = grid.getStore().recordType;
               var p = new Plant({
                   common: "New Plant 1",
                   light: "Mostly Shade",
                   price: 0,
                   availDate: (new Date()).clearTime(),
                   indoor: false
               });
               grid.stopEditing();
               store.insert(0, p);
               grid.startEditing(0, 0);
           }
       }]
   });
   // trigger the data store load
   store.load();

}); </script> 


   <select name="light" id="light" style="display: none;">
     <option value="Shade">Shade</option>
     <option value="Mostly Shady">Mostly Shady</option>
     <option value="Sun or Shade">Sun or Shade</option>
     <option value="Mostly Sunny">Mostly Sunny</option>
     <option value="Sunny">Sunny</option>
   </select>

</body> </html> 


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