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

案例说明

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

页面层级说明

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

相关代码

获取表单相关层级

//获取当前功能整个表单界面

Ext.getCmp('JE_DEMO_ZCBJE_jemainview').up('[xtype=appfuncview]')

//根据层级获取表单

Ext.getCmp('JE_DEMO_TEACHER_jemainview').down("jecenterview").down("jeeditview").down("tabpanel").down("jeformview");

获取表单

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

获取表单按钮条

Ext.getCmp('JE_JDAL_ALWD_jeformview').down('[xtype=toolbar]');

获取表单按钮

其他按钮同下方法，按钮编码不清楚在获取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_DEMO_YZSQ_jeformview').down('button[ref="wfLczzBtn"]').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("测试保存”);

获取表单字段

//获取表单所有字段数组
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

获取表单子功能

表单内纵向展示

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]')

//表单tab

Ext.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

获取表单的流程审批历史数据

 Ext.getCmp('JE_DEMO_QJSQ_jeformview').down('fieldset[itemId=__wflog]').data

通过事件（字段/按钮）获取表单层级和表单中字段或者子功能集合等组件

//通过字段获取form表单
field.up("jeformview");
//通过字段获取mainview
field.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]");

关键字，相关问题

• EXTJS
• 表单