form-grid.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:8k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     Ext.QuickTips.init();
  9.     // turn on validation errors beside the field globally
  10.     Ext.form.Field.prototype.msgTarget = 'side';
  11.     var bd = Ext.getBody();
  12. //   Define the Grid data and create the Grid
  13.     var myData = [
  14.         ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  15.         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  16.         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  17.         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  18.         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  19.         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  20.         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  21.         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  22.         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  23.         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  24.         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  25.         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  26.         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  27.         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  28.         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  29.         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  30.         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  31.         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  32.         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  33.         ['McDonald's Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  34.         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  35.         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  36.         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  37.         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  38.         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  39.         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  40.         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  41.         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  42.         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  43.     ];
  44.     var ds = new Ext.data.Store({
  45.         reader: new Ext.data.ArrayReader({}, [
  46.             {name: 'company'},
  47.             {name: 'price', type: 'float'},
  48.             {name: 'change', type: 'float'},
  49.             {name: 'pctChange', type: 'float'},
  50.             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  51. //          Rating dependent upon performance 0 = best, 2 = worst
  52.             {name: 'rating', type: 'int', convert: function(v, rec) {
  53.                    if (rec[3] < 0) return 2;
  54.                    if (rec[3] < 1) return 1;
  55.                    return 0;
  56.                }
  57.             }
  58.         ])
  59.     });
  60.     ds.loadData(myData);
  61.     // example of custom renderer function
  62.     function italic(value){
  63.         return '<i>' + value + '</i>';
  64.     }
  65.     // example of custom renderer function
  66.     function change(val){
  67.         if(val > 0){
  68.             return '<span style="color:green;">' + val + '</span>';
  69.         }else if(val < 0){
  70.             return '<span style="color:red;">' + val + '</span>';
  71.         }
  72.         return val;
  73.     }
  74.     // example of custom renderer function
  75.     function pctChange(val){
  76.         if(val > 0){
  77.             return '<span style="color:green;">' + val + '%</span>';
  78.         }else if(val < 0){
  79.             return '<span style="color:red;">' + val + '%</span>';
  80.         }
  81.         return val;
  82.     }
  83.     
  84.     // render rating as "A", "B" or "C" depending upon numeric value.
  85.     function rating(v) {
  86.         if (v == 0) return "A"
  87.         if (v == 1) return "B"
  88.         if (v == 2) return "C"
  89.     }
  90.     // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
  91.     // custom or reusable ColumnModels
  92.     var colModel = new Ext.grid.ColumnModel([
  93.         {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
  94.         {header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
  95.         {header: "Change", width: 55, sortable: true, renderer: change, dataIndex: 'change'},
  96.         {header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
  97.         {header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
  98.         {header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: 'rating'}
  99.     ]);
  100.     bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
  101. /*
  102.  *    Here is where we create the Form
  103.  */
  104.     var gridForm = new Ext.FormPanel({
  105.         id: 'company-form',
  106.         frame: true,
  107.         labelAlign: 'left',
  108.         title: 'Company data',
  109.         bodyStyle:'padding:5px',
  110.         width: 750,
  111.         layout: 'column',    // Specifies that the items will now be arranged in columns
  112.         items: [{
  113.             columnWidth: 0.60,
  114.             layout: 'fit',
  115.             items: {
  116.                 xtype: 'grid',
  117.                 ds: ds,
  118.                 cm: colModel,
  119.                 sm: new Ext.grid.RowSelectionModel({
  120.                     singleSelect: true,
  121.                     listeners: {
  122.                         rowselect: function(sm, row, rec) {
  123.                             Ext.getCmp("company-form").getForm().loadRecord(rec);
  124.                         }
  125.                     }
  126.                 }),
  127.                 autoExpandColumn: 'company',
  128.                 height: 350,
  129.                 title:'Company Data',
  130.                 border: true,
  131.                 listeners: {
  132.                     render: function(g) {
  133.                         g.getSelectionModel().selectRow(0);
  134.                     },
  135.                     delay: 10 // Allow rows to be rendered.
  136.                 }
  137.             }
  138.         },{
  139.             columnWidth: 0.4,
  140.             xtype: 'fieldset',
  141.             labelWidth: 90,
  142.             title:'Company details',
  143.             defaults: {width: 140, border:false},    // Default config options for child items
  144.             defaultType: 'textfield',
  145.             autoHeight: true,
  146.             bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
  147.             border: false,
  148.             style: {
  149.                 "margin-left": "10px", // when you add custom margin in IE 6...
  150.                 "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
  151.             },
  152.             items: [{
  153.                 fieldLabel: 'Name',
  154.                 name: 'company'
  155.             },{
  156.                 fieldLabel: 'Price',
  157.                 name: 'price'
  158.             },{
  159.                 fieldLabel: '% Change',
  160.                 name: 'pctChange'
  161.             },{
  162.                 xtype: 'datefield',
  163.                 fieldLabel: 'Last Updated',
  164.                 name: 'lastChange'
  165.             }, {
  166.                 xtype: 'panel',
  167.                 layout: 'table',
  168.                 layoutConfig: {
  169.                     columns: 4
  170.                 },
  171.                 anchor: '100%',
  172.                 defaults: {
  173.                     border: false,
  174.                     layout: 'form',
  175.                     labelWidth: 15,
  176.                     style: {
  177.                         paddingRight: '10px'
  178.                     }
  179.                 },
  180. // A radio group: A setValue on any of the following 'radio' inputs using the numeric
  181. // 'rating' field checks the radio instance which has the matching inputValue.
  182.                 items: [{
  183.                     cellCls: 'x-form-item',
  184.                     xtype: 'label',
  185.                     text: 'Rating',
  186.                        width: 98
  187.                 }, {
  188.                     items: {    
  189.                         xtype: 'radio',
  190.                         name: 'rating',
  191.                         inputValue: '0',
  192.                         fieldLabel: 'A'
  193.                     }
  194.                 }, {
  195.                     items: {
  196.                         xtype: 'radio',
  197.                         name: 'rating',
  198.                         inputValue: '1',
  199.                         fieldLabel: 'B'
  200.                     }
  201.                 }, {
  202.                     items: {
  203.                         xtype: 'radio',
  204.                         name: 'rating',
  205.                         inputValue: '2',
  206.                         fieldLabel: 'C'
  207.                     }
  208.                 }]
  209.             }]
  210.         }],
  211.         renderTo: bd
  212.     });
  213.     
  214.     //  Create Panel view code. Ignore.
  215.     createCodePanel('form-grid.js', 'View code to create this Form');
  216. });