本文共 2998 字，大约阅读时间需要 9 分钟。

 1.  建立bean 对象     var priceAdjustDetailType = Ext.data.Record.create([            {name: 'id',mapping: "shemeId",type: 'int' },            {name: 'merId',mapping: "merId",type: 'int' },         {name: 'editFlag',mapping: "editFlag", type: 'string'}            ]);     Ext.data.Record.create建立一个bean 对象,有id,merid两个字段属性 2.  建立数据源 ds     var ds = new Ext.data.Store({             proxy: new Ext.data.DWRProxy(AjaxInPriceAdjustmentService.getDetailsById, false),                reader: new Ext.data.ListRangeReader({id:'id'},priceAdjustDetailType),         remoteSort: true,         sortInfo:{field:'id', direction:'ASC'}// 排序信息         });     1)  Ext.data.DWRProxy 建立数据源的数据代理 AjaxInPriceAdjustmentService.getDetailsById 是通过dwr调用java中的方法,返回        一个bean对象     2)  Ext.data.ListRangeReader 设置读取模型为priceAdjustDetailType ,即priceAdjustDetailType 映射java方法中返回的bean类 3.  建立表列          var cm = new Ext.grid.ColumnModel([         {            id:'id',            header: "id",            dataIndex: 'id',            sortable:true,            hidden:true,  //隐藏            width: 20,            fixed: true,            editable: false         },     {        header:'editFlag',        dataIndex:"editFlag",        hidden: true,        fixed: true,        width: 50,        editable: false,        fixed: true,            editor: new fm.TextField()     }      ]); 4. 建立表格顶部工具按钮     var gridToolbar=new Ext.Toolbar({         //width:'300',         items:[             '->',             {                id:'addOrder',            tooltip:'添加',            iconCls:'add',            handler:doInsert            //按钮触发事件             },             {                id:'delOrder',            iconCls:'remove',            tooltip:'删除',            handler:doDel             }         ]         }) 5.  建立表格面板     var grid = new Ext.grid.EditorGridPanel({             xtype:'editorgrid',             store: ds,                //引用了数据源ds  (第二步建立)             cm: cm,                        //引用表列      (第三步建立)                 tbar:gridToolbar,            //引用顶部工具按钮(第四步建立)             width: 850,  //985             height: 420,             frame:true,         enableColumnMove:false,   //禁止列拖动             clicksToEdit:1,//设置点击几次才可编辑             //selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式, 否则将无法删除数据             selModel: new Ext.grid.RowSelectionModel(),//设置选中模式             loadMask: {msg:'正在加载数据，请稍侯……'}         })          grid.addListener('afteredit',doAfterEdit);            //设置表格编辑之后触发事件     1)  引用第二步建立的数据源ds,第三步建立的表列 dm 6.   建立表单面板     var priceAdjustForm = new Ext.FormPanel({             title:'新增/修改商品进价调价单',             buttonAlign:'right',                bodyStyle:'padding:3px 3px 3;border:5px',             frame:true,         //防止标签靠顶部，且加了背景色             width:870,             height:470,             labelPad : 0,        // 标签与字段录入框之间的空白             items: [{                     layout:'column',                     bodyStyle:'padding:0px 0px 0;border:0px',                     items:[{                        columnWidth:.9,   //指定占多少列                        layout: 'form',                        defaults: {width:250},                        bodyStyle:'padding:0px 0px 0;border:0px',                        labelWidth: 60,                        items: [{                            xtype:'field',                            fieldLabel: '调整单号',                            name: 'billCode',                            id: 'billCode',                            style: 'color:red',             //               value:orderenterid,                            readOnly:true                        }]                        },                      {                         columnWidth:.5,                         layout: 'form',                         defaults: {width: 120},                         bodyStyle:'padding:0px 0px 0;border:0px',                         labelWidth: 60,                         items: [userListCombox]  //引用common.js                     },                      {                         columnWidth:.8,                         layout: 'form',                         //defaults: {width: 90},                         bodyStyle:'padding:0px 0px 0;border:0px',                         labelWidth: 60,                         items: [{                             xtype:'textarea',                             fieldLabel: '备注    ',                             name: 'memo',                             id:'memo',                             value:'memo',                             width: 400,                             height: 50                         }]                      }]               },{                   columnWidth:.10,                   layout: 'form',                   items: [grid]                        //引用第五步建立的表格控件 grid              }],buttons: [sureButton,cancelButton]         });     priceAdjustForm.render('inpriceAdjustAddEditForm');        //设置表单在jsp页面的显示位置    grid.on('validateedit', doValidateEdit);                   (inpriceAdjustAddEditForm是页面上div 的id)     

转载地址：http://vlpoi.baihongyu.com/