JEPaaS低代码平台ext.js与功能表单层级使用关系

凯特-李春莹

https://doc.jepaas.com/docs/je_d ... epaas-1dkgb1ok86i0h

页面层级说明

jemainview -> jecenterview -> jedataview 和 jeeditview
jedataview -> jegridview 和 jetreeview
jeeditview -> tabpanel -> jeformview

1.获取表单相关层级

//获取当前功能整个表单界面
Ext.getCmp('JE_DEMO_ZCBJE_jemainview').up('[xtype=appfuncview]');
//根据层级获取表单
Ext.getCmp('JE_DEMO_TEACHER_jemainview').down("jecenterview").down("jeeditview").down("tabpanel").down("jeformview");

2.获取表单

var form = Ext.getCmp("JE_JDAL_ALWD_jeformview");

3.获取表单按钮条
Ext.getCmp('JE_JDAL_ALWD_jeformview').down('[xtype=toolbar]');

4.获取表单按钮
其他按钮同下方法，按钮编码不清楚在获取toolbar之后，找到items属性就可以找到

Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[xtype=toolbar]").down("button[itemId=TestBtn1]");
// 获取表单按钮，隐藏按钮
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[xtype=toolbar]").down("button[itemId=TestBtn1]").hide();
//  获取表单按钮，显示按钮
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[xtype=toolbar]").down("button[itemId=TestBtn1]").show();
// 获取表单按钮，修改文本
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[xtype=toolbar]").down("button[itemId=TestBtn1]").setText("测试保存”);

5.获取表单字段
//获取表单所有字段数组
var fieldsArry = Ext.getCmp('JE_XHJ_KEHUGUANLI_jeformview').down('[xtype=container]').down('[itemId=formBox]').items.items
//获取某一字段
fieldsArry[0];
// 获取表单分组框
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("fieldset[name=fieldset_1]");
// 获取表单分组框后修改分组框标题
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("fieldset[name=fieldset_1]").setTitle(“测试分组框”);
// 获取表单字段,表单字段值Ext.getCmp("JE_JDAL_ALWD_jeformview").getFields("ALWD_ALMC")Ext.getCmp("JE_JDAL_ALWD_jeformview").down("textfield[name=ALWD_ALMC]");
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[name=ALWD_ALMC]").getValue();
//  获取表单字段,设置表单字段值
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("[name=ALWD_ALMC]").setValue("测试");
// 获取表单子功能集合
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("childfuncfield[name=childfuncfield_1]");
//获取子功能集合列表
Ext.getCmp("JE_JDAL_ALWD_jeformview").down("childfuncfield[name=childfuncfield_1]").grid

6.获取表单子功能

表单内纵向展示

getFormBox打开有items属性，items属性中有子功能的panel，用panel的属性值ID获取子功能，在获取子功能的列表

Ext.getCmp('JE_XHJ_KEHUGUANLI_jeformview').getFormBox();
Ext.getCmp('JE_XHJ_KEHUGUANLI_jeformview').down("panel[id=JE_XHJ_KEHUGUANLI_childs_form]").down("jegridview");

表单内横向展示

//子功能tab
Ext.getCmp('JE_DEMO_ZCBJE_childs_form').down('[xtype=tabpanel]')
//子功能tab 标题头部
Ext.getCmp('JE_DEMO_ZCBJE_childs_form').down('[xtype=tabpanel]').down('tabbar')
//子功能 grid上边的按钮条
Ext.getCmp('JE_DEMO_ZCBJE_childs_form').down('[xtype=tabpanel]').down('tab').card.down('toolbar[itemId=buttonBar]')
//子功能显示的grid
Ext.getCmp('JE_DEMO_ZCBJE_childs_form').down('[xtype=tabpanel]').down('tab').card.down('jecenterview').down('jegridview');

表单横向展示

//表单编辑view
Ext.getCmp('JE_DEMO_ZCBJE_jecenterview').down('[xtype=jeeditview]')
//表单
tabExt.getCmp('JE_DEMO_ZCBJE_jecenterview').down('[xtype=jeeditview]').down('[xtype=tabpanel]')
//表单 tab 标题头部
Ext.getCmp('JE_DEMO_ZCBJE_jecenterview').down('[xtype=jeeditview]').down('[xtype=tabpanel]').down('tabbar');
// form表单详细
Ext.getCmp('JE_DEMO_ZCBJE_jecenterview').down('[xtype=jeeditview]').down('[xtype=tabpanel]').down('tab').card;
//表单上所有的子功能列表
Ext.getCmp('JE_DEMO_ZCBJE_jecenterview').down('[xtype=jeeditview]').down('[xtype=tabpanel]').items.items

7.获取表单的流程审批历史数据
Ext.getCmp('JE_DEMO_QJSQ_jeformview').down('fieldset[itemId=__wflog]').data

8.通过事件（字段/按钮）获取表单层级和表单中字段或者子功能集合等组件
//通过字段获取form表单
field.up("jeformview");
//通过字段获取
mainviewfield.up("jeformview;").up("jemainview");
//通过字段获取表单按钮
field.up("jeformview").down("[xtype=toolbar]")down("button[itemId=TestBtn1]");
//通过字段获取子功能集合
field.up("jeformview").down("childfuncfield[name=childfuncfield_1]");
//通过字段获取子功能(表单内纵向示例)
field.up("jeformview").down("panel[id=TEST_TB1_childs_form]");
//通过按钮获取表单
btn.up("jeformview");
//通过按钮获取表单中字段
btn.up("jeformview").getFields("ALWD_ALMC")
//通过按钮获取表单中子功能集合
btn.up("jeformview").down("childfuncfield[name=childfuncfield_1]");
//通过按钮获取子功能(表单内纵向示例)
btn.up("jeformview").down("panel[id=TEST_TB1_childs_form]");