EXT 基本使用

 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)