|
|
@@ -1,182 +1,203 @@
|
|
|
-Ext.define('erp.view.component.formcomponent',{
|
|
|
- extend:'Ext.form.Panel',
|
|
|
- alias:'widget.formcomponent',
|
|
|
- title:'Form Panel',
|
|
|
- type:'form',
|
|
|
+Ext.define('erp.view.component.formcomponent', {
|
|
|
+ extend: 'Ext.form.Panel',
|
|
|
+ alias: 'widget.formcomponent',
|
|
|
+ title: 'Form Panel',
|
|
|
+ type: 'form',
|
|
|
mixins: ['erp.view.component.commonpanel'],
|
|
|
- layout:'column',
|
|
|
- closable:true,
|
|
|
- detailData:null,
|
|
|
- detailSelect:null,
|
|
|
- baseConfigFormValue:null,
|
|
|
- defaults:{
|
|
|
- //width:'100%',
|
|
|
- //height:'25%',
|
|
|
- margin:'5 0 5 5',
|
|
|
+ layout: 'column',
|
|
|
+ closable: true,
|
|
|
+ detailData: null,
|
|
|
+ detailSelect: null,
|
|
|
+ baseConfigFormValue: null,
|
|
|
+ defaults: {
|
|
|
+ //width:'100%',
|
|
|
+ //height:'25%',
|
|
|
+ margin: '5 0 5 5',
|
|
|
},
|
|
|
bodyPadding: '5 10 5 10',
|
|
|
- initComponent:function(){
|
|
|
+ initComponent: function () {
|
|
|
var me = this;
|
|
|
- Ext.apply(me.listeners,this.mixins['erp.view.component.commonpanel'].listeners);
|
|
|
+ Ext.apply(me.listeners, this.mixins['erp.view.component.commonpanel'].listeners);
|
|
|
//加载数据
|
|
|
- Ext.apply(me,{
|
|
|
- config:{
|
|
|
- baseConfigForm:[{
|
|
|
- xtype:'textfield',
|
|
|
- fieldLabel:'标题',
|
|
|
- name:'title',
|
|
|
- listeners:{
|
|
|
- blur:function( field, e, eOpts ){
|
|
|
+ Ext.apply(me, {
|
|
|
+ config: {
|
|
|
+ baseConfigForm: [{
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel: '标题',
|
|
|
+ name: 'title',
|
|
|
+ listeners: {
|
|
|
+ blur: function (field, e, eOpts) {
|
|
|
//修改title
|
|
|
- var v=field.getValue();
|
|
|
- if(v){
|
|
|
+ var v = field.getValue();
|
|
|
+ if (v) {
|
|
|
this.changeTitle(v);
|
|
|
}
|
|
|
},
|
|
|
- scope:this
|
|
|
+ scope: this
|
|
|
}
|
|
|
- },{
|
|
|
- xtype:'numberfield',
|
|
|
- fieldLabel:'列数',
|
|
|
- name:'columns',
|
|
|
+ }, {
|
|
|
+ xtype: 'numberfield',
|
|
|
+ fieldLabel: '列数',
|
|
|
+ name: 'columns',
|
|
|
minValue: 1,
|
|
|
value: 2
|
|
|
- },{
|
|
|
- xtype:'textfield',
|
|
|
- fieldLabel:'field-style',
|
|
|
- name:'fieldstyle'
|
|
|
- },{
|
|
|
- xtype:'textfield',
|
|
|
- fieldLabel:'value-style',
|
|
|
- name:'valuestyle'
|
|
|
- },{
|
|
|
- xtype:'textarea',
|
|
|
- fieldLabel:'数据源',
|
|
|
- grow:true,
|
|
|
- name:'sql',
|
|
|
- listeners:{
|
|
|
- afterrender:function(cmp){
|
|
|
- cmp.getEl().set({
|
|
|
- 'spellcheck': 'false'
|
|
|
- });
|
|
|
- }
|
|
|
+ }, {
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel: 'field-style',
|
|
|
+ name: 'fieldstyle'
|
|
|
+ }, {
|
|
|
+ xtype: 'textfield',
|
|
|
+ fieldLabel: 'value-style',
|
|
|
+ name: 'valuestyle'
|
|
|
+ }, {
|
|
|
+ xtype: 'textarea',
|
|
|
+ fieldLabel: '数据源',
|
|
|
+ grow: true,
|
|
|
+ name: 'sql',
|
|
|
+ listeners: {
|
|
|
+ afterrender: function (cmp) {
|
|
|
+ cmp.getEl().set({
|
|
|
+ 'spellcheck': 'false'
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- },this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
|
|
|
- itemDefault:{
|
|
|
- xtype:'displayfield',
|
|
|
- fieldLabel:'字段',
|
|
|
- value:100,
|
|
|
+ }, this.mixins['erp.view.component.commonpanel'].basicLayoutForm],
|
|
|
+ itemDefault: {
|
|
|
+ xtype: 'displayfield',
|
|
|
+ fieldLabel: '字段',
|
|
|
+ value: 100,
|
|
|
},
|
|
|
- propGridDefault:{
|
|
|
- fieldname:'字段',
|
|
|
- fieldvalue:100,
|
|
|
- propconfig:[{
|
|
|
- display:'变量名',
|
|
|
- property:'value',
|
|
|
- propvalue:''
|
|
|
- },{
|
|
|
- display:'宽度(%)',
|
|
|
- property:'width',
|
|
|
- propvalue:''
|
|
|
- },{
|
|
|
- display:'field-style',
|
|
|
- property:'fieldstyle',
|
|
|
- propvalue:''
|
|
|
- },{
|
|
|
- display:'value-style',
|
|
|
- property:'valuestyle',
|
|
|
- propvalue:''
|
|
|
- },{
|
|
|
- display:'显示',
|
|
|
- property:'rendername',
|
|
|
- propvalue:''
|
|
|
- }]
|
|
|
+ propGridDefault: {
|
|
|
+ fieldname: '字段',
|
|
|
+ fieldvalue: 100,
|
|
|
+ propconfig: [{
|
|
|
+ display: '变量名',
|
|
|
+ property: 'value',
|
|
|
+ propvalue: ''
|
|
|
+ }, {
|
|
|
+ display: '宽度(%)',
|
|
|
+ property: 'width',
|
|
|
+ propvalue: ''
|
|
|
+ }, {
|
|
|
+ display: 'field-style',
|
|
|
+ property: 'fieldstyle',
|
|
|
+ propvalue: ''
|
|
|
+ }, {
|
|
|
+ display: 'value-style',
|
|
|
+ property: 'valuestyle',
|
|
|
+ propvalue: ''
|
|
|
+ }, {
|
|
|
+ display: '显示',
|
|
|
+ property: 'rendername',
|
|
|
+ propvalue: ''
|
|
|
+ }]
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
me.callParent(arguments);
|
|
|
},
|
|
|
- listeners:{
|
|
|
- resetitemposition:function(form,fieldRecords){
|
|
|
- var me = this;
|
|
|
- Ext.each(fieldRecords,function(field,index){
|
|
|
- item = form.getComponent(field.get('fieldid'));
|
|
|
- form.remove(item,true);
|
|
|
- });
|
|
|
- var items = me.getFormItemsByRecords(fieldRecords);
|
|
|
- form.add(items);
|
|
|
+ listeners: {
|
|
|
+ resetitemposition: function (form, fieldRecords, from, to) {
|
|
|
+ var items = form.getFormItems();
|
|
|
+ if (from < to) {
|
|
|
+ items.splice(to + 1, 0, items[from]);
|
|
|
+ items.splice(from, 1);
|
|
|
+ } else {
|
|
|
+ items.splice(to, 0, items[from]);
|
|
|
+ items.splice(from + 1, 1);
|
|
|
+ }
|
|
|
+ form.removeAll();
|
|
|
+ for (var i = 0; i < items.length; i++) {
|
|
|
+ form.add({
|
|
|
+ xtype: items[i].xtype,
|
|
|
+ fieldLabel: items[i].fieldLabel,
|
|
|
+ value: items[i].value
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // Ext.each(fieldRecords,function(field,index){
|
|
|
+ // item = form.getComponent(field.get('fieldid'));
|
|
|
+ // form.remove(item,true);
|
|
|
+ // });
|
|
|
+ // var items = me.getFormItemsByRecords(fieldRecords);
|
|
|
+ // form.add(items);
|
|
|
},
|
|
|
- addItem:function(form,detailGrid){
|
|
|
+ addItem: function (form, detailGrid) {
|
|
|
var fieldId = Ext.id();
|
|
|
var item = form.config.itemDefault;
|
|
|
var propDetail = form.config.propGridDefault;
|
|
|
item.id = fieldId;
|
|
|
propDetail.fieldid = fieldId;
|
|
|
form.add(item);
|
|
|
- detailGrid.getStore().loadData([propDetail],true);
|
|
|
+ detailGrid.getStore().loadData([propDetail], true);
|
|
|
},
|
|
|
- fieldnamechange:function(form,record){
|
|
|
- var field = form.getComponent(record.get('fieldid'));
|
|
|
- field.setFieldLabel(record.get('fieldname'));
|
|
|
+ fieldnamechange: function (form, record, index) {
|
|
|
+ form.items.items[index].setFieldLabel(record.get('fieldname'));
|
|
|
},
|
|
|
- fieldpropchange:function(form,record,index){
|
|
|
- var field = form.getComponent(record.get('fieldid'));
|
|
|
- var prop = record.get('propconfig')[index];
|
|
|
- field[prop.property] = prop.propvalue;
|
|
|
- form.removeAll(true);
|
|
|
- var records = Ext.getCmp('elementdetailgrid').getStore().data.items;
|
|
|
- var items = form.getFormItemsByRecords(records);
|
|
|
- form.add(items);
|
|
|
+ fieldpropchange: function (form, record, index) {
|
|
|
+ // var detailGrid = Ext.getCmp('elementdetailgrid');
|
|
|
+ // var selectedrow = detailGrid.getSelectionModel().getSelection()[0];
|
|
|
+
|
|
|
+ // var field = form.getComponent(record.get('fieldid'));
|
|
|
+ // var prop = record.get('propconfig')[index];
|
|
|
+ // field[prop.property] = prop.propvalue;
|
|
|
+ // form.removeAll(true);
|
|
|
+ // var records = Ext.getCmp('elementdetailgrid').getStore().data.items;
|
|
|
+ // var items = form.getFormItemsByRecords(records);
|
|
|
+ // form.add(items);
|
|
|
},
|
|
|
- fielddelete:function(form,record){
|
|
|
+ fielddelete: function (form, record) {
|
|
|
var field = form.getComponent(record.get('fieldid'));
|
|
|
form.remove(field);
|
|
|
},
|
|
|
},
|
|
|
- getFormItemsByRecords:function(fieldRecords){
|
|
|
- var items = new Array();
|
|
|
- var obj = new Object();
|
|
|
- Ext.each(fieldRecords,function(record){
|
|
|
- obj = {
|
|
|
- xtype:'displayfield',
|
|
|
- fieldLabel:record.get('fieldname'),
|
|
|
- id:record.get('fieldid'),
|
|
|
- //value:record.get('fieldvalue')
|
|
|
- };
|
|
|
- Ext.each(record.get('propconfig'),function(prop){
|
|
|
- obj[prop.property] = prop.propvalue;
|
|
|
- });
|
|
|
- obj.value = '100'; //默认显示值设为100
|
|
|
- items.push(obj);
|
|
|
- });
|
|
|
- return items;
|
|
|
- },
|
|
|
- updateFormDefault:function(field){
|
|
|
- var me = this;
|
|
|
- Ext.Array.each(me.config.propGridDefault.propconfig,function(prop){
|
|
|
- if(prop.property==field.name){
|
|
|
+ getFormItemsByRecords: function (fieldRecords) {
|
|
|
+ var items = new Array();
|
|
|
+ var obj = new Object();
|
|
|
+ Ext.each(fieldRecords, function (record) {
|
|
|
+ obj = {
|
|
|
+ xtype: 'displayfield',
|
|
|
+ fieldLabel: record.get('fieldname'),
|
|
|
+ id: record.get('fieldid'),
|
|
|
+ //value:record.get('fieldvalue')
|
|
|
+ };
|
|
|
+ Ext.each(record.get('propconfig'), function (prop) {
|
|
|
+ obj[prop.property] = prop.propvalue;
|
|
|
+ });
|
|
|
+ obj.value = '100'; //默认显示值设为100
|
|
|
+ items.push(obj);
|
|
|
+ });
|
|
|
+ return items;
|
|
|
+ },
|
|
|
+ updateFormDefault: function (field) {
|
|
|
+ var me = this;
|
|
|
+ Ext.Array.each(me.config.propGridDefault.propconfig, function (prop) {
|
|
|
+ if (prop.property == field.name) {
|
|
|
prop.propvalue = field.getValue();
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- repaint: function() {
|
|
|
-// this.setPosition(this.toLeft,this.toTop);
|
|
|
- this.setTitle(this.baseConfigFormValue.title);
|
|
|
- var items = [];
|
|
|
- var me = this;
|
|
|
- var prop = this.config.propGridDefault;
|
|
|
- var item = Object.assign({},prop);
|
|
|
- var arr = item.propconfig.map(function(c,i){return c.property;});
|
|
|
- this.detailData.map(function(v, i) {
|
|
|
- var item = {
|
|
|
- xtype: 'displayfield',
|
|
|
- fieldLabel: v.fieldname,
|
|
|
- /*width: me.getWidth() * (Number(eval(v.propconfig[arr.indexOf('width')].propvalue.replace('%','/100')))),
|
|
|
- height: me.getHeight() * (Number(eval(v.propconfig[arr.indexOf('height')].propvalue.replace('%','/100')))),*/
|
|
|
- value: 100
|
|
|
- }
|
|
|
- items.push(item);
|
|
|
- });
|
|
|
- this.add(items);
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getFormItems: function () {
|
|
|
+ var form = this;
|
|
|
+ var items = Object.assign({}, form.items.items);
|
|
|
+ var allItems = [];
|
|
|
+ for (var i = 0; items[i]; i++) {
|
|
|
+ allItems.push({
|
|
|
+ xtype: items[i].xtype,
|
|
|
+ fieldLabel: items[i].fieldLabel,
|
|
|
+ value: items[i].value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return allItems;
|
|
|
+ },
|
|
|
+ repaint: function () {
|
|
|
+ var me = this;
|
|
|
+ me.setTitle(me.baseConfigFormValue.title);
|
|
|
+
|
|
|
+ me.detailData.map(function (v, i) {
|
|
|
+ var item = Object.assign({}, me.config.itemDefault);
|
|
|
+ item.fieldLabel = v.fieldname;
|
|
|
+ me.add(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|