這一節，我們将看到ExtJs功能強大的可編輯網格控件，幾乎與VS.Net的GridView功能一樣了，但是ExtJs的可是純JS的UI
一.靜态示例(改自ExtJs的官方示例)
a.因為我們是采用xml做為資料源的，這裡貼出xml的内容
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Code
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <?xml version="1.0" encoding="utf-8"?>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <catalog>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <plant>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <common>紅竹</common>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <botanical>産自加拿大</botanical>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <zone>4</zone>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <light>喜陰</light>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <price>2.44</price>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <availability>03/15/2006</availability>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <indoor>0</indoor>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </plant>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <common>紫羅蘭</common>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <botanical>Erythronium americanum</botanical>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <light>半陰半光</light>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <price>9.04</price>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <availability>02/01/2006</availability>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <indoor>1</indoor>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </plant>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </catalog>
b.ExtJs調用頁面
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <html xmlns="http://www.w3.org/1999/xhtml">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <head>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <script type="text/javascript" src="../ext-all.js"></script>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <title>可編輯的網格</title>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </head>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <body>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <script type="text/javascript">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Ext.onReady(function()
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) {
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Ext.QuickTips.init();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) function formatDate(value)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) return value ? value.dateFormat('Y年m月d日') : '';
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) };
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var fm = Ext.form;
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //定義複選框列
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var checkColumn = new Ext.grid.CheckColumn(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "室内?",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'indoor',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 55
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) });
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //定義網格的列模闆
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var cm = new Ext.grid.ColumnModel([
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) id: 'common',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "名稱",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'common',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 220,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) editor: new fm.TextField(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) allowBlank: false
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) })
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "光照",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'light',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 130,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) editor: new Ext.form.ComboBox(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) allowBlank:false,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) typeAhead: true,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) triggerAction: 'all',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) transform: 'sellight',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) lazyRender: true,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) listClass: 'x-combo-list-small'
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "售價",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'price',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 70,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) align: 'right',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) renderer: 'usMoney',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) editor: new fm.NumberField(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) allowBlank: false,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) allowNegative: false,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) maxValue: 100000
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "上市時間",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'availDate',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 105,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) renderer: formatDate,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) editor: new fm.DateField(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) format: 'm/d/y',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) minValue: '01/01/06',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) disabledDays: [0, 6],
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) disabledDaysText: '目前還未上市'
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) checkColumn
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ]);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) cm.defaultSortable = true;
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //定義記錄的類型
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var Plant = Ext.data.Record.create([
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) {name: 'common', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'botanical', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'light' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'price', type: 'float' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'indoor', type: 'bool' }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ]);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //建立資料源
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var store = new Ext.data.Store(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) {
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) url: 'plants.xml',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) reader: new Ext.data.XmlReader(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) {
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) record: 'plant'
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }, Plant),
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) sortInfo:
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { field: 'common', direction: 'ASC' }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //建立可編輯的網格
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var grid = new Ext.grid.EditorGridPanel(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) store: store,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) cm: cm,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) renderTo: 'editor-grid',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 600,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) height: 180,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) autoExpandColumn: 'common',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) title: '可編輯的網格',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) frame: true,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) plugins: checkColumn,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) clicksToEdit: 1,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) tbar: [
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) text: '增加記錄',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) handler: function()
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var p = new Plant(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) common: '新品種1',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) light: '喜光',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) price: 1.0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) availDate: (new Date()).clearTime(),
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) indoor: 1
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) });
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) grid.stopEditing();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) store.insert(0, p);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) grid.startEditing(0, 0);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }]
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) });
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //加載資料
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) store.load();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) //複選框列改變時，儲存gird的id列值
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Ext.grid.CheckColumn = function(config)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Ext.apply(this, config);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) if (!this.id)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) this.id = Ext.id();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) this.renderer = this.renderer.createDelegate(this);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) Ext.grid.CheckColumn.prototype =
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) init: function(grid)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) this.grid = grid;
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) this.grid.on('render', function()
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var view = this.grid.getView();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) view.mainBody.on('mousedown', this.onMouseDown, this);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }, this);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) onMouseDown: function(e, t)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) e.stopEvent();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var index = this.grid.getView().findRowIndex(t);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var record = this.grid.store.getAt(index);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) record.set(this.dataIndex, !record.data[this.dataIndex]);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) renderer: function(v, p, record)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) p.css += ' x-grid3-check-col-td';
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-cc-' + this.id + '"> </div>';
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </script>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <select name="sellight" id="sellight" style="display: none;">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="陰">陰</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="喜陰">喜陰</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="半陰半光">半陰半光</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="喜光">喜光</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="日光">日光</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </select>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <div id="editor-grid"></div>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </body>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </html>
二.結合WCF動态讀取
1.WCF服務端
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) [OperationContract]
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) [WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")]
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) public T_Class[] GetData()
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) List<T_Class> _Result = new List<T_Class>();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) using (DBDataContext db = new DBDataContext())
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) _Result = db.T_Classes.Where(c => (new string[]
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { "shop", "product" }).Contains(c.F_Type.ToLower())).Take(30).ToList();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) db.Connection.Close();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) return _Result.ToArray();
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }
注意:為使linq to sql中的類支援WCF資料契約，還是要手動對類添加[DataContract]标志，對字段添加[DataMember]标志，否則無法序列化；另外對于System.DateTime類型的字段，最終序列化成xml時，格式類似<F_AddTime>2007-03-07T15:48:04</F_AddTime>，ExtJs不能正确識别這種格式，無奈之下，隻好手動修改*.designer.cs檔案中自動生成的T_Class類，把F_AddTime手動修改為System.String類型，同時人工處理傳回格式，如下：
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) [Column(Storage="_F_AddTime", DbType="DateTime")]
[DataMember]
public string F_AddTime
{
get
{
return CNTVS.TOOLS.Utils.FormatDateString(this._F_AddTime,"yyyy-mm-dd");
set
if ((this._F_AddTime != value))
{
this.OnF_AddTimeChanging(value);
this.SendPropertyChanging();
this._F_AddTime = value;
this.SendPropertyChanged("F_AddTime");
this.OnF_AddTimeChanged();
這裡，我調用了自己寫的一個工具庫的FormatDateString方法，當然大家也可以自己定義傳回的格式，隻要ExtJs能識别就可以了
2.前端頁面，跟靜态示例幾乎一樣，貼一下代碼:
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <%
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) @ Page Language="C#" AutoEventWireup="true" CodeBehind="03_Grid_Editable.aspx.cs" Inherits="Ajax_WCF._3_Grid_Editable" %>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <html xmlns="http://www.w3.org/1999/xhtml" >
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <head runat="server">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" />
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) function newGuid()
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var guid = "";
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) for (var i = 1; i <= 32; i++)
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var n = Math.floor(Math.random() * 16.0).toString(16);
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) guid += n;
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) guid += "-";
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) return guid;
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "顯示?",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_isShow',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) id: 'F_ID',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "分類ID",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_ID',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "分類名稱",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_ClassName',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) allowBlank:false
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "類别",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_Type',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) editor: new fm.ComboBox(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) transform: 'selType',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "排序号",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_Orders',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) align: 'right',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) header: "添加時間",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) dataIndex: 'F_AddTime',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) disabledDaysText: '不能早于2001年01月06日'
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var T_Class = Ext.data.Record.create([
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ID', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ClassName', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ShortName',type:"string" },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ParentID', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_Depth', type: 'float' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_RootID', type: 'float' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_Orders', type: 'float' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ParentIDStr', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ParentNameStr', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_ReadMe', type: 'string' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_AddTime', type: 'date', dateFormat: 'Y-m-d' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_Type' ,type:"string"},
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_MaxPage', type: "float" },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_No', type: "float" },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_isShow', type: "bool" },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { name: 'F_AutoID', type: "float" }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) url: 'MyService.svc/GetData',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) record: 'T_Class'
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) }, T_Class),
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { field: 'F_ID', direction: 'ASC' }
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) width: 750,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) height: 300,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) autoExpandColumn: 'F_ID',
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) /**//*title: '基本網格示例',*/
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) viewConfig:
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) { columnsText: '顯示列', sortAscText: '升序', sortDescText: '降序' },
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) frame: false,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) var p = new T_Class(
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ID:newGuid(),
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ClassName:"新分類1",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ShortName:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ParentID:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_Depth:0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_RootID:0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_Orders:0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ParentIDStr:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ParentNameStr:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_ReadMe:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_AddTime:(new Date()).clearTime(),
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_Type:"shop",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_MaxPage:0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_No:"",
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_isShow:0,
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) F_AutoID:0
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <select name="selType" id="selType" style="display: none;">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="shop">商家分類</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="product">産品分類</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <option value="place">地區分類</option>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <form id="form1" runat="server">
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) <div id="editor-grid"></div>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) </form>
ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) ExtJs學習筆記(4)_EditorGridPanel(可編輯的網格控件) 
