/* 表单控件
* 有二个模式:creating、editing、readonly，默认为editing
*
*
*/
Ext.define('Ext.ux.form.Panel', {
extend: 'Ext.form.Panel'
, alias: 'widget.uxform'
, mixins: {
configurable: 'Ext.ux.util.Configurable'
}
, cfgModel: 'Ext.ux.configuation.ViewConfigModel'
, formText: {
saveSuccess: 'Save Successfully'
}
, config: {
bodyStyle: 'padding:10px'
, autoScroll: true
, fieldDefaults: {
labelAlign: 'right'
, 380
, msgTarget: 'side'
, validateOnChange: false
, plugins: [{ ptype: 'uxvalidation'}]
}
, create: false
}
/* @cfg {Number} columnCount 列数
* Default is 2
*/
, columnCount: 2
/* @cfg {Boolean} autoMode 自动模式，根据{@Link queryParam}得到参数确定当前模式。
* 如果url.search中没有键为{@Link queryParam}的参数，form将进入creating模式。
* 如果{@Link create}为true，则不进行加载。
* Default is false
*/
, autoMode: false
/* @cfg {String} queryParam 查询参数，多个参数使用&连接。
* Default is id
*/
, queryParam: 'id'
/* @cfg {String/Array} model 模型名称。*/
, model: Ext.emptyString
/* @cfg {Boolean} create true则进入create模式。*/
/* @override */
, constructor: function (config) {
var me = this;
config = config || {};
me.initConfig(config);
config = Ext.merge({
layout: {
type: 'table',
columns: me.columnCount
}
, items: []
}, config);
me._items = config.items;
config.items = []; //在loadConfigData中重新生成items
me._autoMode = config.autoMode;
me.callParent([config]);
me.msgPanel = Ext.create('Ext.panel.Panel', {
id: 'errorMsg'
, hidden: true
, bodyStyle: 'background-color: #F3D6D6'
, dock: 'top'
});
me.addDocked(me.msgPanel);
me._param = new Ext.util.MixedCollection();
var search = Ext.ux.util.getSearch(), q = me.queryParam.split('&');
Ext.Array.forEach(q, function (p) {
if (!Ext.isEmpty(p) && !Ext.isEmpty(search[p]))
me._param.add(p, search[p]);
});
if (me.create || me._param.length == 0)
me.createNewForm();
if (me.remoteCfg && (me.cfgStore || me.cfgProxy || me.cfgData)) {
me.loadConfig();
} else {
var data = [];
Ext.Array.forEach(me._items, function (c) {
data.push({
data: {
Visible: true
, Configuration: c
}
});
});
me.loadConfigData(data);
}
}
/**
* @private
* @override
*/
, createForm: function () {
var me = this, cfg = {}, props = me.basicFormConfigs,
len = props.length, i = 0, prop;
for (; i < len; ++i) {
prop = props[i];
cfg[prop] = me[prop];
}
var model = [];
if (Ext.isString(me.model))
model.push(me.model);
else if (Ext.isArray(me.model))
model = me.model;
cfg.model = model;
return new Ext.ux.form.Basic(me, cfg);
}
/*@private*/
, loadConfigData: function (records) {
var me = this;
me.form.loadConfigData(records);
if (me._autoMode && me._param.length > 0) {
var query = {};
me._param.eachKey(function (k, v) {
query[k] = v;
});
me.loadForm({ params: query });
}
}
/*@private*/
, showConfigError: function (msg) {
var item = Ext.ComponentManager.create({ html: '<span>' + this.configErrorText + ':<br/>' + msg + '</span>', border: false }, 'container');
this.add(item);
}
/**
* 在creating模式保存后需要调用此方法转换成editing模式，调用{@link submitForm}后会自己调用此方法
*/
, toEditMode: function () {
this.form.changeMode(this.form.mode.editing);
}
/**
* 获取当前模式:'creating'、'editing'、'readonly'
*/
, getCurrentMode: function () {
return this.form.currentMode;
}
, loadModel: function (model) {
this.form.loadModel(model);
}
, updateModel: function (modelName) {
this.form.updateModel(modelName);
}
, getModel: function (modelName) {
return this.form.getModel(modelName);
}
, createNewForm: function () {
this.form.createNewForm();
}
, copyForm: function () {
this.form.copyForm();
}
, loadForm: function (options) {
this.form.loadForm(options);
}
, submitForm: function (options) {
this.form.submitForm(options);
}
, resetForm: function () {
this.form.resetForm();
}
})
---------------------------basic--------------------------------------
/**
* 项目用到的form的内置类,提供form基本的功能.
*
* @class Ext.ux.form.Basic
* @extends Ext.form.Basic
*/
Ext.define('Ext.ux.form.Basic', {
extend: 'Ext.form.Basic'
/* @private */
, _models: new Ext.util.MixedCollection()
, _rawModels: new Ext.util.MixedCollection()
, mode: {
creating: 'creating'
, editing: 'editing'
, readonly: 'readonly'
}
, currentMode: 'editing'
, changeMode: function (m) {
if (this.currentMode != this.mode[m]) {
this.currentMode = this.mode[m];
if (Ext.isArray(this._configData))
this.loadConfigData(this._configData);
}
}
, loadForm: function (options) {
return this.doAction('uxload', options);
}
, submitForm: function (options) {
options = options || {};
return this.doAction('uxsubmit', options);
}
, createNewForm: function () {
var me = this;
me.changeMode(me.mode.creating);
Ext.Array.forEach(me.model, function (m) {
var model = Ext.ModelManager.getModel(m);
me.loadModel(model.create());
});
}
, copyForm: function () {
var me = this;
me.changeMode(me.mode.creating);
me._rawModels.each(function (m) {
var rec = m.copy();
rec.setId(null);
Ext.data.Model.id(rec);
me.loadModel(rec);
});
}
, clearInvalid: function () {
var me = this;
me.owner.msgPanel.hide();
me.getFields().each(function (f) {
f.clearInvalid();
});
}
, resetForm: function () {
var me = this;
me.clearInvalid();
me._rawModels.each(function (m) {
me.setValuesByModel(m);
});
}
/*
* 读取model数据到form
*/
, loadModel: function (model) {
var me = this;
me.clearInvalid();
function setModel(m) {
if (me._models.containsKey(m.modelName))
me._models.replace(m.modelName, m);
else
me._models.add(m.modelName, m);
if (me._rawModels.containsKey(m.modelName))
me._rawModels.replace(m.modelName, m.copy());
else
me._rawModels.add(m.modelName, m.copy());
me.setValuesByModel(m);
}
if (Ext.isArray(model)) {
for (var m in model) {
setModel(m);
}
} else
setModel(model);
}
, updateModel: function (modelName) {
var me = this;
me._models.each(function (m) {
if (Ext.isEmpty(modelName) || modelName == m.modelName) {
var val = {};
val = me.getValuesByModel(m.modelName);
m.beginEdit();
m.set(val);
m.endEdit();
}
});
return this;
}
, getModel: function (modelName) {
var me = this;
if (!Ext.isEmpty(modelName))
return me._models.get(modelName);
else {
var lst = [];
Ext.Array.forEach(me.model, function (m) {
lst.push(me._models.get(m));
});
return lst;
}
}
/**
* 只给相应的类的字段赋值
* @param {Ext.data.Model} model 要赋值给form的model
* @method setValuesByModel
* @return {Ext.form.Basic} The Ext.form.Basic
*/
, setValuesByModel: function (model) {
var fields = this.getFields();
fields.filterBy(function (item) {
return item.getName().match(new RegExp("^" + model.modelName + "."));
}, this).each(function (field) {
field.setValue(model.get(field.getName().substring(model.modelName.length + 1)));
}, this)
return this;
}
/**
* 只获取对应类的字段的值
* @param {String} modelName 类名
* @method getValuesByModel
* @return {object} 获取到的对象
*/
, getValuesByModel: function (modelName, notAllowEmpty) {
var fields = this.getFields(), ret = {};
fields.filterBy(function (item) {
return item.getName().match(new RegExp("^" + modelName + "."));
}, this).each(function (field) {
if (field.getName()) {
var val = field.getValue();
if (!Ext.isEmpty(val) || !notAllowEmpty) {
ret[field.getName().substring(modelName.length + 1)] = val;
}
}
}, this)
return ret;
}
, isValid: function () {
this.owner.msgPanel.hide();
var isValid = this.callParent(arguments), errors = {};
if (!isValid) {
this.getFields().each(function (f) {
if (!f.isValid()) {
errors[f.getFieldLabel()] = f.getErrors();
}
});
this.showErrors(errors);
}
return isValid;
}
/**
* 在信息面板显示错误信息
* @method showErrors
* @param {Object} errors {错误:错误信息...}
*/
, showErrors: function (errors) {
var me = this;
function getErrHtml(errs) {
var html = "<ul style='color:#BA1717'>";
function renderLi(arr) {
var ret = "";
for (var i = 0; i < arr.length; i++) {
ret += "<span>" + arr[i] + "</span>";
}
return ret;
};
function findField(name) {
return me.getFields().findBy(function (f) {
return f.getName().match(new RegExp(name + '$'));
});
}
if (Ext.isString(errs)) {
Ext.Array.forEach(errs.split('|'), function (e) {
if (!Ext.isEmpty(e)) {
var f = e.split(':');
if (f.length > 1) {
var t = f[0], field = findField(t);
if (field) {
t = field.getFieldLabel();
field.setActiveError(f[1]);
}
html += "<li>" + t + ":<span>" + f[1] + "</span></li>";
}
else
html += "<li><span>" + e + "</span></li>";
}
});
} else {
for (var v in errs) {
if (!Ext.isEmpty(errs[v])) {
html += "<li>" + v + ":<span>" + renderLi(errs[v]) + "</span></li>";
}
}
}
html += "</ul>";
return html;
};
var html = getErrHtml(errors);
me.owner.msgPanel.update(html);
me.owner.msgPanel.show();
}
, loadConfigData: function (records) {
this._configData = records;
var o = this.owner;
o.suspendLayouts();
o.items.each(function (i) {
o.remove(i);
});
Ext.each(records, function (item) {
this.addColumn(item.data);
}, this);
o.resumeLayouts(true);
}
/* @protected */
, addColumn: function (obj) {
var me = this, cfg;
try {
if (Ext.isObject(obj['Configuration']))
cfg = obj['Configuration'];
else {
if (!obj['Visible']) return;
eval('cfg = {' + obj['Configuration'] + '}');
cfg.fieldLabel = obj['HeaderText'];
cfg.name = obj['DataField'];
cfg.xtype = obj['XType'];
cfg.itemId = obj['ItemId'];
cfg.hidden = false;
}
}
catch (e) {
//<debug>
Ext.Error.raise("Error in Ext.ux.form.Basic's addColumn");
//</debug>
}
var cmp = Ext.clone(this.owner.fieldDefaults);
Ext.merge(cmp, cfg || {});
Ext.Array.forEach(me.owner._items, function (i) {
if (i.itemId == cmp.itemId) {
cmp = Ext.merge(i, cmp);
}
});
if (me.currentMode == me.mode.editing && cfg.readonly)
cmp.xtype = 'uxdisplayfield';
cmp.hidden = me.currentMode != me.mode.editing && cfg.insertVisible === false;
cmp.width = cmp.width * (cmp.colspan || 1);
if (cfg.name)
cmp.name = cfg.name.indexOf('.') > 0 || Ext.isEmpty(me.model) ? cfg.name : me.model[0] + '.' + cfg.name;
var item = Ext.ComponentManager.create(cmp);
me.owner.add(item);
}
})