分组表格和表格响应表单实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>loadrecord.html</title> <link rel="stylesheet" type="text/css" href="./ext-3.3.1/resources/css/ext-all.css" /> <script type="text/javascript" src="./ext-3.3.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="./ext-3.3.1/ext-all.js"></script> <script type="text/javascript" src="loadrecord.js"></script> </head> <body> </body> </html>Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="qtip"; var data = [ ["1","男",new Date(1979,09,06),"tom",21,"you_5214@sina.com"], ["2","女",new Date(1980,08,07),"tony",46,"you_5214@sina.com"], ["3","男",new Date(1990,07,08),"Jet Li",31,"you_5214@sina.com"], ["4","女",new Date(1910,06,09),"washington",29,"you_5214@sina.com"] ]; var fields = ['id','sex','brithday','name','age','eamil']; var cm = new Ext.grid.ColumnModel([ { header: "ID", width: 60, sortable: true,dataIndex :'id' }, { header: "性别", width: 70, sortable: true,dataIndex :'sex' }, { header: "生日", width: 130, sortable: true,dataIndex :'brithday', editor:new Ext.form.DateField() }, { header: "姓名", width: 100, sortable: true,dataIndex :'name'}, { header: "年龄", width: 100, sortable: true,dataIndex :'age' }, { header: "Email", width: 120, sortable: true,dataIndex :'eamil' } ]); var store = new Ext.data.GroupingStore({ data :data, reader : new Ext.data.ArrayReader({id:"id"},fields) }); var gridForm = new Ext.FormPanel({ id: 'user_info', applyTo:Ext.getBody(), frame: true, autoHeight:true, labelAlign: 'left', title: '员工信息表', bodyStyle:'padding:5px', width: 600, items: }] }); });
页:
[1]