JavaScript DHTML/Ext JS/ColumnModel

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

Dynamic Form interacting with an embedded Grid

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

   Ext.QuickTips.init();
   // turn on validation errors beside the field globally
   Ext.form.Field.prototype.msgTarget = "side";
   var bd = Ext.getBody();

// Define the Grid data and create the Grid

   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"]
   ];
   var ds = new Ext.data.Store({
       reader: new Ext.data.ArrayReader({}, [
           {name: "company"},
           {name: "price", type: "float"},
           {name: "change", type: "float"},
           {name: "pctChange", type: "float"},
           {name: "lastChange", type: "date", dateFormat: "n/j h:ia"},

// Rating dependent upon performance 0 = best, 2 = worst

           {name: "rating", type: "int", convert: function(v, rec) {
                  if (rec[3] < 0) return 2;
                  if (rec[3] < 1) return 1;
                  return 0;
              }
           }
       ])
   });
   ds.loadData(myData);
   // example of custom renderer function
   function italic(value){
       return "" + value + "";
   }
   // 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;
   }
   
   // render rating as "A", "B" or "C" depending upon numeric value.
   function rating(v) {
       if (v == 0) return "A"
       if (v == 1) return "B"
       if (v == 2) return "C"
   }
   // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
   // custom or reusable ColumnModels
   var colModel = new Ext.grid.ColumnModel([
       {id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
       {header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
       {header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
       {header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
       {header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
       {header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
   ]);
   bd.createChild({tag: "h2", html: "Using a Grid with a Form"});

/*

*    Here is where we create the Form
*/
   var gridForm = new Ext.FormPanel({
       id: "company-form",
       frame: true,
       labelAlign: "left",
       title: "Company data",
       bodyStyle:"padding:5px",
       width: 750,
       layout: "column",    // Specifies that the items will now be arranged in columns
       items: [{
           columnWidth: 0.60,
           layout: "fit",
           items: {
               xtype: "grid",
               ds: ds,
               cm: colModel,
               sm: new Ext.grid.RowSelectionModel({
                   singleSelect: true,
                   listeners: {
                       rowselect: function(sm, row, rec) {
                           Ext.getCmp("company-form").getForm().loadRecord(rec);
                       }
                   }
               }),
               autoExpandColumn: "company",
               height: 350,
               title:"Company Data",
               border: true,
               listeners: {
                   render: function(g) {
                       g.getSelectionModel().selectRow(0);
                   },
                   delay: 10 // Allow rows to be rendered.
               }
           }
       },{
           columnWidth: 0.4,
           xtype: "fieldset",
           labelWidth: 90,
           title:"Company details",
           defaults: {width: 140, border:false},    // Default config options for child items
           defaultType: "textfield",
           autoHeight: true,
           bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
           border: false,
           style: {
               "margin-left": "10px", // when you add custom margin in IE 6...
               "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
           },
           items: [{
               fieldLabel: "Name",
               name: "company"
           },{
               fieldLabel: "Price",
               name: "price"
           },{
               fieldLabel: "% Change",
               name: "pctChange"
           },{
               xtype: "datefield",
               fieldLabel: "Last Updated",
               name: "lastChange"
           }, {
               xtype: "panel",
               layout: "table",
               layoutConfig: {
                   columns: 4
               },
               anchor: "100%",
               defaults: {
                   border: false,
                   layout: "form",
                   labelWidth: 15,
                   style: {
                       paddingRight: "10px"
                   }
               },

// A radio group: A setValue on any of the following "radio" inputs using the numeric // "rating" field checks the radio instance which has the matching inputValue.

               items: [{
                   cellCls: "x-form-item",
                   xtype: "label",
                   text: "Rating",
                      width: 98
               }, {
                   items: {    
                       xtype: "radio",
                       name: "rating",
                       inputValue: "0",
                       fieldLabel: "A"
                   }
               }, {
                   items: {
                       xtype: "radio",
                       name: "rating",
                       inputValue: "1",
                       fieldLabel: "B"
                   }
               }, {
                   items: {
                       xtype: "radio",
                       name: "rating",
                       inputValue: "2",
                       fieldLabel: "C"
                   }
               }]
           }]
       }],
       renderTo: bd
   });
   
   //  Create Panel view code. Ignore.
   createCodePanel("form-grid.js", "View code to create this Form");

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


 </source>