ext4js 生成一个添加表单(step 3)

操作系统：windows 2008 r2

数据库：MSSQL2008 64位

jdk：jdk1.6.0_45  64位

extjs：ext-4.2.1.883

ext 设计工具：sencha Version: 2.2.0 Build: 908

myEclipse：8.6.1

文档及源代码下载地址：http://download.csdn.net/detail/yeness/5812407

目标：在年底完成 springMVC 与 ext4js 的权限系统整合，完成 .net MVC 与 ext4js 的权限系统的整合，并能把代码全部通过测试并完成开发说明文档，同时上传有效源码。

1.     通过sencha创建界面

重新创建基于 ext JS 4.2.X 的项目

 

创建“form panel”

 

调整“高度宽度”等属性

提示：form的id属性应当与 “from bean” 对象的名称一致。

例如 formbean 结构如下 formbean对象形如：Gnlb gnlb，则form的id属性则应为”gnlb”

package com.icreate.formbean;

 

public class Gnlb {

 

    private StringGNMC;

   

    。。。。。

   

    public String getGNMC() {

       returnGNMC;

    }

 

    public void setGNMC(String gNMC) {

       GNMC = gNMC;

    }

。。。。

}

 

 

 

继续加入“text”

 

调整text属性”name” 为 formbean的属性“GNMC”

 

为表单加入一个”toolbar”

 

 

继续加入一个button，同时改变 text属性，加入“click”事件（当然是前台事件）

 

生成如下代码：

Ext.define('MyApp.view.MyForm', {

   extend: 'Ext.form.Panel',

 

   height: 378,

   width: 499,

   bodyPadding: 10,

   title: 'My Form',

 

   initComponent: function() {

       var me = this;

 

       Ext.applyIf(me, {

           items: [

                {

                    xtype: 'textfield',

                    anchor: '100%',

                    fieldLabel: 'Label',

                    name: 'GNMC'

                }

           ],

           dockedItems: [

                {

                    xtype: 'toolbar',

                    dock: 'top',

                    items: [

                        {

                            xtype: 'button',

                            text: '新增',

                            listeners: {

                                click: {

                                    fn:me.onButtonClick,

                                    scope: me

                                }

                            }

                        }

                    ]

                }

           ]

       });

 

       me.callParent(arguments);

   },

 

   onButtonClick: function(button, e, eOpts) {

 

    }

 

});

 

看看如何能让text为“必填项”

allowBlank : false,

blankText : '字段不能为空'

 

说明：allowBlank是否为空；blankText :为空时的错误提示信息

 

 

把下列代码放到“onButtonClick:function(button, e, eOpts)”，就可以向服务器提交了

 

myForm = Ext.getCmp('gnlb');

        if (!myForm.getForm().isValid())

        return;           

       

        myForm.getForm().submit({

         waitMsg: '正在提交数据',

         waitTitle: '提示',

         url: 'saveFrom',

             method: 'POST',

             success: function(form, action){

              Ext.Msg.alert('提示','保存成功');

        },

        failure: function(response,options){

         var respText= Ext.util.JSON.decode(response.responseText);

             Ext.Msg.alert('提示','原因如下：'+ respText.msg);

         }

     });

 

 

看看后台代码

/**

     * 返回

     * @return

     */ 

    @RequestMapping(value="/KZ/GNLB/saveFrom",produces="text/plain;charset=UTF-8") 

    @ResponseBody 

    public Object saveFrom(@ModelAttribute Gnlb gnlb,HttpServletRequest request){           

      

    System.out.println("saveFrom");   

    StringGNMC=gnlb.getGNMC();

    StringTITLE=gnlb.getTITLE();

    StringPGNID=gnlb.getPGNID();

    StringURL=gnlb.getURL();

    IntegerPXH= 0;

     

    KZ_GNLBmodel=new KZ_GNLB();

    model.setGNID(UUID.randomUUID().toString());

    model.setGNMC(GNMC);

    model.setTITLE(TITLE);

    model.setPGNID(PGNID);

    model.setURL(URL);

    model.setPXH(PXH);

   

    try

    {

        kz_gnlbService.insert(model);

       

        return"{ success: true, errors:{} }";

    }

    catch(Exception ex)

    {

        return"{ success: false, errors:{info: '"+ex.getMessage()+"'} }";

    }

    finally

    {

       

    }

    }