Ext2.2-用XML做數據源,可編輯Grid的例子

時間  2021-07-14 標籤 XML EXT JavaScript CSS prototype
原文地址：http://www.java2000.net/p8972

先看看運行效果






html源代碼
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" c>
  4. <title>Editor Grid Example</title>
  6. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
  7.          <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
  8.     <script type="text/javascript" src="../ext-all.js"></script>
  9.     <script type="text/javascript">
  10.         Ext.onReady(function(){
  11.             Ext.QuickTips.init();
  13.                 // 日期格式化
  14.             function formatDate(value){
  15.                 return value ? value.dateFormat('Y年m月d日') : '';
  16.             };
  17.             // shorthand alias
  18.             var fm = Ext.form;
  20.             // 自定義的字段
  21.             var checkColumn = new Ext.grid.CheckColumn({
  22.                header: "婚否?",
  23.                dataIndex: 'married',
  24.                width: 55
  25.             });
  27.             // 列數據的模型
  28.             // dataIndex 對應着數據裏面的字段
  29.             var cm = new Ext.grid.ColumnModel([{
  30.                    id:'name', // 數據模型的唯一編號
  31.                    header: "姓名", // 標題
  32.                    dataIndex: 'name', // 對應於數據源裏面的字段
  33.                    width: 220, // 寬度
  34.                    editor: new fm.TextField({ // 編輯的類型
  35.                        allowBlank: false // 不允許爲空，如果爲空，則會顯示紅色波浪線警告且恢復原始數值
  36.                    })
  37.                 },{
  38.                    header: "學位", // 學位的標題
  39.                    dataIndex: 'degree', // 對應於學位
  40.                    width: 130,
  41.                    editor: new Ext.form.ComboBox({ // 使用自定義的下拉框
  42.                        typeAhead: true,
  43.                        triggerAction: 'all',
  44.                        transform:'degree', // 對應的下拉列表ID
  45.                        lazyRender:true,
  46.                        listClass: 'x-combo-list-small'
  47.                     })
  48.                 },{
  49.                    header: "薪資(元)",
  50.                    dataIndex: 'salary',
  51.                    width: 70,
  52.                    align: 'right', // 右對齊
  53.                    editor: new fm.NumberField({ // 數字編輯框
  54.                               decimalPrecision: 0, // 默認的小數點位數
  55.                        allowBlank: false,
  56.                        allowNegative: false, // 不允許爲負數
  57.                        maxValue: 100000 // 最大值爲10萬
  58.                    })
  59.                 },{
  60.                    header: "出生日期",
  61.                    dataIndex: 'birthday',
  62.                    width: 95,
  63.                    renderer: formatDate,
  64.                    editor: new fm.DateField({ // 日期的編輯框
  65.                         format: 'Y-m-d', // 格式
  66.                         minValue: '1908-08-08'
  67.                     })
  68.                 },
  69.                 checkColumn // 自定義的婚否列
  70.             ]);
  73.             // 默認列是可以排序的
  74.             cm.defaultSortable = true;
  76.             // 創建數據源的記錄,代表一個員工
  77.             var Employee = Ext.data.Record.create([
  78.                    // name對應着數據裏面對應的標籤，birthday例外，對應着birth
  79.                    {name: 'name', type: 'string'},
  80.                    {name: 'address', type: 'string'},
  81.                    {name: 'degree'},
  82.                    {name: 'salary', type: 'int'},
  84.                     // 日期自動轉換
  85.                    {name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},
  86.                    {name: 'married', type: 'bool'}
  87.               ]);
  90.             // 創建數據集，讀取員工數據
  91.             var store = new Ext.data.Store({
  92.                 // 使用HTTP協議獲得
  93.                 url: 'employees.xml',
  95.                 // the return will be XML, so lets set up a reader
  96.                 // 返回的是一個XML數據，我們解析爲我們定義的記錄格式 Employee
  97.                 reader: new Ext.data.XmlReader({
  98.                        // 記錄裏面有個 "employee" 的標籤
  99.                        record: 'employee'
  100.                    }, Employee),
  102.                 sortInfo:{field:'name', direction:'ASC'}  // 默認按照姓名正向排序
  103.             });
  106.             // 創建可編輯的 Grid
  107.             var grid = new Ext.grid.EditorGridPanel({
  108.                 store: store, // 指定數據源
  109.                 cm: cm,
  110.                 renderTo: 'editor-grid', // 目標的id位置
  111.                 width:600,
  112.                 height:300,
  113.                 autoExpandColumn:'name',  // 默認自動擴展寬度的字段
  114.                 title:'人員信息編輯',  // 標題
  115.                 frame:true,
  116.                 plugins:checkColumn,
  117.                 clicksToEdit: 0, // 默認爲雙擊編輯，如果爲1則單擊就編輯
  119.                 tbar: [{ // 頂部的工具欄 tools bar
  120.                     text: '增加新員工',
  121.                     handler : function(){
  122.                         var p = new Employee({
  123.                             name: '輸入員工姓名',
  124.                             degree: '學士',
  125.                             salary: 0,
  126.                             birthday: (new Date()).clearTime(),
  127.                             married: false
  128.                         });
  129.                         grid.stopEditing();
  130.                         store.insert(0, p);
  131.                         grid.startEditing(0, 0);
  132.                     }
  133.                 }]
  134.             });
  136.             // 裝載數據
  137.             store.load();
  138.         });
  140.         Ext.grid.CheckColumn = function(config){
  141.             Ext.apply(this, config);
  142.             if(!this.id){
  143.                 this.id = Ext.id();
  144.             }
  145.             thisthis.renderer = this.renderer.createDelegate(this);
  146.         };
  148.         Ext.grid.CheckColumn.prototype ={
  149.             init : function(grid){
  150.                 this.grid = grid;
  151.                 this.grid.on('render', function(){
  152.                     var view = this.grid.getView();
  153.                     view.mainBody.on('mousedown', this.onMouseDown, this);
  154.                 }, this);
  155.             },
  157.             onMouseDown : function(e, t){
  158.                 if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
  159.                     e.stopEvent();
  160.                     var index = this.grid.getView().findRowIndex(t);
  161.                     var record = this.grid.store.getAt(index);
  162.                     record.set(this.dataIndex, !record.data[this.dataIndex]);
  163.                 }
  164.             },
  166.             renderer : function(v, p, record){
  167.                 p.css += ' x-grid3-check-col-td';
  168.                 return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
  169.             }
  170. };
  171.     </script>
  172. </head>
  173. <body>
  174. <h1>可編輯的 Grid</h1>
  175. <!-- 自定義的數據下拉框 -->
  176. <select name="degree" id="degree" style="display: none;">
  177.         <option value="博士">博士</option>
  178.         <option value="碩士">碩士</option>
  179.         <option value="雙學士">雙學士</option>
  180.         <option value="學士">學士</option>
  181.         <option value="其它">其它</option>
  182. </select>
  183. <div id="editor-grid"></div>
  184. </body>
  185. </html>


用到的 employees.xml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <catalog>
  3.   <employee>
  4.     <name>張三</name>
  5.     <address>天津市第一大街</address>
  6.     <zone>4</zone>
  7.     <degree>學士</degree>
  8.     <salary>2440</salary>
  10.     <birth>03/15/2006</birth>
  11.     <married>true</married>
  12.   </employee>
  13.   <employee>
  14.     <name>李四</name>
  15.     <address>北京市朝陽區</address>
  16.     <zone>3</zone>
  18.     <degree>學士</degree>
  19.     <salary>9370</salary>
  20.     <birth>03/06/2006</birth>
  21.     <married>true</married>
  22.   </employee>
  23.   <employee>
  24.     <name>王五</name>
  26.     <address>上海浦東</address>
  27.     <zone>4</zone>
  28.     <degree>博士</degree>
  29.     <salary>6810</salary>
  30.     <birth>05/17/2006</birth>
  31.     <married>false</married>
  33.   </employee>
  34.   <employee>
  35.     <name>趙六</name>
  36.     <address>廣州</address>
  37.     <zone>4</zone>
  38.     <degree>學士</degree>
  39.     <salary>9900</salary>
  41.     <birth>03/06/2006</birth>
  42.     <married>true</married>
  43.   </employee>
  44.   <employee>
  45.     <name>孫武</name>
  46.     <address>四川成都</address>
  47.     <zone>3</zone>
  49.     <degree>學士</degree>
  50.     <salary>6440</salary>
  51.     <birth>01/20/2006</birth>
  52.     <married>true</married>
  53.   </employee>
  54. </catalog>


結論： Extjs 確實不錯。 <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>
联系我们 沪ICP备13005482号-10