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

Love The Way You Lie 2021-12-14 12:55 222阅读 0赞

**操作系统：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][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** String GNMC;

**。。。。。**

**public** String getGNMC() \{

**return** GNMC;

**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**

[http_download.csdn.net_detail_yeness_5812407]: http://download.csdn.net/detail/yeness/5812407

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 3.4 Ext JS工具栏 toolbar全介绍

相关 [Ext JS]3.6 Ext JS 表格(Grid)概览

相关 Ext JS 4 概述

相关 Ext JS 4 (5) —— Ext.MessageBox.show()

相关 Ext JS 4 (4) —— Ext.MessageBox.prompt()

相关 Ext JS 4 (3) —— Ext.MessageBox.confirm()

相关 Ext JS 4 (2) —— Ext.MessageBox.alert()

相关 Ext JS 4：模型剖析

相关 EXT4 JS 生成主页面（利用 Sencha工具）（step 1）

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