UAP 从前端到后端 详细教程 (四) WebLet里的代码

DetailView.js

$ns("holiday.views");

$import("mx.controls.ToolBar");
$import("mx.datacontrols.DataForm");

holiday.views.DetailView = function() {
	var me = $extend(mx.views.View);
	var base = {};

	me.objID = null;

	me.form = null;

	base.init = me.init;
	me.init = function() {
		base.init();

		_initControls();
	};
	
	function _initControls() {
		// 表单的 工具栏 ,我只添加了一条 保存的工具
		var toolBar = new mx.controls.ToolBar({
			width : "100%",
			items : [ {
				name : "save",
				text : mx.msg("SAVE"),
				imageKey : "save",
				toolTip : mx.msg("SAVE"),
				// _btnSave_onclick 这个方法 DetailViewController 要有
				// 具体实现自己 编写
				onclick : me.controller._btnSave_onclick
			} ]
		});
		
		me.addControl(toolBar);
		/** 获取下面字段的 值传给后台 */
		//var all_data = me.view.form.entityContainer.data;
		//console.log(me.view.form.entityContainer.dicts);
		var deFormEntity = new mx.datacontainers.FormEntityContainer({
			baseUrl : holiday.mappath("~/rest/holiday/info"),
			primaryKey : "ID",
			// 根据 FieldsName,自动赋值到本地
			// 从后端,加载 表单的数据
			type: "remote",
			// 表示当前数据容器是否有元数据信息
			// true 的话,弹出此表单会 额外发送一条 url 请求
			loadMeta:false
		})
		me.form = new mx.datacontrols.DataForm({
			entityContainer : deFormEntity,
			// TODO 指定主键列名
			// TODO 指定显示列数组
			fields : [ {
				name : "ID",
				caption : "编号",
				editorType : "NumberEditor",
				colSpan: "2",
				readOnly : false
			},{
				name : "USERID",
				caption : "请求人编号",
				colSpan: "2",
				editorType : "NumberEditor",
				readOnly : false
			},{
				name : "REQUEST_DATE",
				caption : "请假发起日期",
				editorType : "DateTimeEditor",
				colSpan: "2",
				readOnly : false
			},{
				name : "REQUEST_REASON",
				caption : "请假原因",
				editorType : "TextEditor",
				colSpan: "5",
				readOnly : false
			},{
				name : "REQUEST_DAYS",
				caption : "请假天数",
				editorType : "NumberEditor",
				colSpan: "2",
				readOnly : false
			},{
				name : "APPROVER_UID",
				caption : "审批人编号",
				colSpan: "2",
				editorType : "NumberEditor",
				readOnly : false
			},{
				name : "STATE",
				caption : "状态",
				colSpan: "2",
				// 下拉选的类型
				editorType : "DropDownEditor",
				allowEditing: false, 
				// 指定显示的 是 name
				displayMember: "name",
				// 指定实际值 是 name
				valueMember: "name",
				// 下拉选里面的元素
				items: [ { name: "待批准" }, { name:"已批准"},{ name: "不批准"}] ,
				readOnly : false
			} ]
		});

		me.addControl(me.form);

		me.on("activate", me.controller._onactivate);
	}

	return me.endOfClass(arguments);
};

DetailViewController.js

$ns("holiday.views");
$import("holiday.views.DetailView");

holiday.views.DetailViewController = function(selectValues) {
	var me = $extend(mx.views.ViewController);
	var base = {};

	me.getView = function() {
		if (me.view == null) {
			me.view = new holiday.views.DetailView({
				controller : me
			});
		}
		return me.view;
	};

	me._onactivate = function(e) {
		// TODO: 窗体激活时的逻辑。
		if (me.view != null && typeof (me.view.form) != "undefined") {
			me.view.form.load(me.view.objID);
		}
	};
	// 创建 一个RESTClient,利用这个 向后台发送请求 (这个就是框架封装的 Ajax)
	var client_edit = new mx.rpc.RESTClient({
		baseUrl : holiday.mappath("~/rest/holiday")
	});
	// 回掉函数
	var call_backFun =  function(obj) {
		if (obj.successful) {
			mx.indicate("info", "修改成功");
			// dataGrid.load();
		} else {
			mx.indicate("info", "sorry,修改失败");
		}
	}

	/** 编辑时点击保存的逻辑 */
	me._btnSave_onclick = function() {
		var all_data = me.view.form.entityContainer.data;
		// me.view.form.save();
		// 这里 给  view的objID 赋值,是因为向后台发送请求时,会把 这个 objID 拼上去
		// 这个 view 其实 就是 DetailView me就是 DetailViewController 对象
		// me 也就是本身
		if (me.view.objID == 'new') {
			client_edit.get("/new",all_data,call_backFun);
		} else {
			client_edit.get("/saveEdit", all_data,call_backFun);
		}
		console.log("保存-调用over!");

		// 重新加载数据,不然修改完 需要手动刷新页面 才看得到效果
		// me.view.form.load();
	};

	return me.endOfClass(arguments);
};

然后贴两张 表单弹出的视图.

新建和 编辑 弹出的是同一个表单,但是传递的参数不同

所以,执行的 功能有点不同.