3、利用Ext組件完成Form和Grid之間的數(shù)據(jù)傳輸
這里我們來(lái)介紹一下利用JSP+ExtJs完成的Form和Grid之間的數(shù)據(jù)傳輸,。首先看看截圖1-4
從圖1-4我們給大家介紹一下該功能,。首先,，通過(guò)ExtJs中的組件Grid將要用的數(shù)據(jù)讀取到Grid表格當(dāng)中,。其次，當(dāng)鼠標(biāo)點(diǎn)擊Grid表格
中一行記錄,，就在右邊將數(shù)據(jù)填充到ExtJs的另一個(gè)組件Form表單中,。最后，我們就可以在Form表單中做修改,、刪除,、清空等操作。
下面我們就給出詳細(xì)代碼
（1）建一個(gè)form.js文件,，這個(gè)文件主要是寫(xiě)ExtJs代碼-
-
-
-
-
-
-
- Ext.onReady(function() {
- Ext.QuickTips.init();
-
- Ext.form.Field.prototype.msgTarget = "side";
-
-
- var data = [
- ['1', '全興', '酒類', '1992-09-09'],
- ['2', '驕子', '煙類', '2009-08-07'],
- ['3', '美好', '食品類', '2009-08-06'],
- ['4', '奇多', '食品類', '2009-06-07'],
- ['5', '百事可樂(lè)', '飲料類', '2009-03-24'],
- ['6', '瀘州老窖', '酒類', '2009-02-25']
- ];
-
- var cm = new Ext.grid.ColumnModel([
- {header: '編號(hào)', dataIndex: 'id', sortable: true},
- {header: '名稱', dataIndex: 'name'},
- {header: '種類', dataIndex: 'desc'},
- {header: '生產(chǎn)日期', dataIndex: 'date', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
- ]);
-
- var store = new Ext.data.Store({
- proxy: new Ext.data.MemoryProxy(data),
- reader: new Ext.data.ArrayReader({},[
- {name: 'id'},
- {name: 'name'},
- {name: 'desc'},
- {name: 'date', type: 'date', dateFormat: 'Y-m-d'}
- ])
- });
- store.load();
-
- var form = new Ext.form.FormPanel({
- id: 'things',
- title: 'Form和Grid之間的數(shù)據(jù)傳輸',
- labelAlign: 'right',
- width: 800,
- layout: 'column',
- frame: 'true',
- items: [{
- columnWidth: 0.6,
- layout: 'fit',
- items: [{
- xtype: 'grid',
- store: store,
- cm: cm,
- autoHeight: true,
- border: false,
- title: 'Grid表格中的數(shù)據(jù)',
- sm: new Ext.grid.RowSelectionModel({
- singleSelect: true,
- listeners: {
- rowselect: function (sm, row, rec) {
- Ext.getCmp("things").getForm().loadRecord(rec);
- }
- }
- }),
- listeners: {
- render: function(g) {
- g.getSelectionModel().selectRow(0);
- },
- delay: 10
- },
- viewConfig: {
- forceFit: true
- }
- }]
- },{
- columnWidth: 0.4,
- defaultType: 'textfield',
- autoHeight: true,
- labelWidth: 90,
- buttonAlign: 'center',
- xtype: 'fieldset',
- defaults: {width: 140},
- title: 'Grid表格中的數(shù)據(jù)對(duì)應(yīng)到From表單中',
- items: [{
- fieldLabel: '編號(hào)',
- name: 'id',
- readOnly: true
- },{
- fieldLabel: '名稱',
- name: 'name'
- },{
- fieldLabel: '種類',
- name: 'desc'
- },{
- xtype: 'datefield',
- fieldLabel: '生產(chǎn)日期',
- name: 'date',
- format: 'Y年m月d日'
- }],
- buttons: [{
- text: '修改'
- },{
- text: '刪除'
- },{
- text: '清空',
- handler: function() {
- form.getForm().reset();
- }
- }]
- }],
- renderTo: 'form'
- });
（2）創(chuàng)建form.jsp文件,，這文件主要是加載ExtJs相關(guān)的核心文件和剛剛創(chuàng)建的form.js文件。
- <%@ page language="java" pageEncoding="gb2312"%>
-
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
-
- <title>FormPanel加入到Window窗口中的應(yīng)用</title>
-
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
- <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../ext-all.js"></script>
- <script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" src="form.js"></script>
- </head>
-
- <body>
- </body>
- </html>
按照上面的步驟就可以完成截圖1-4的效果,。
|
