代码部署
开源版项目(支持PC以及APP开发): jepaas-project-frontend
PC端插件项目: p-suanbanyun(je-paas-frontend-plugin)
用vscode打开插件项目,在终端运行 cnpm i 下载所有package.json配置中的依赖包:
npm i 或者 cnpm i
当所有依赖安装完成,运行本地调试启动命令:
npm run dev
当插件开发完成,需升级到线上,则启动build命令:
npm run build
build后的文件会输出在根目录dist文件下,pro目录是插件的view[hash].js文件,static文件夹是所有引用的资源文件,需要把dist文件下的东西全部放到后台部署的webapps>webRoot下(覆盖),后台升级就OK了;
开发标准
ExtJS插件开发采用MVC的设计模式开发,具体目录结构参考
jepaas-project-frontend/src/pc/ext:
└── demo // 模块名
├── controller // 控制器目录
├── view // 视图目录
└── store // 数据目录,也可以直接写到view里
代码示例
创建示例目录
jepaas-project-frontend/src/pc/ext:
└── demo // 模块名
├── controller // 控制器目录
| └── MainController.js // 控制器
└── view // 视图目录
├── GridView.js // 列表Demo文件
└── FormView.js // 表单Demo文件
案例1
自定义版面,挂接到列表,根据列表刷新,触发自定义页面相关事件
1. 创建列表demo文件GridView.js
/**
* 自定义功能的视图
*/
Ext.define("PRO.demo.view.GridView", {
extend: 'Ext.panel.Panel',
alias: 'widget.demo.gridview',
layout: 'fit',
initComponent: function () {
var me = this;
me.store = Ext.create('Ext.data.Store', { fields: ['html'], data: [] })
//数据视图
me.items = [{
xtype: 'dataview',
itemId: 'view',
store: me.store,
autoScroll: true,
itemSelector: 'div.demo-list-item-wrap',
emptyText: '<div style="padding:20px;text-align:center;color:#444;font-size:20px;">没有数据</div>',
tpl: [
'<tpl for=".">',
'<div class="demo-list-item-wrap" style="padding:10px;">',
'{html}',
'</div>',
'</tpl>'
]
}];
//功能按钮
me.tbar = {
cls: 'je-button-bar',
items: [{
text: '获取选中的数据',
handler: function (btn) {
//主功能列表
var grid = me.mainGrid;
//获取选中的数据
var sels = grid.getSelectionModel().getSelection();
if (JE.isEmpty(sels)) {
JE.alert('请选择数据!');
} else {
JE.alert('选中了'+sels.length+'条数据!');
}
}
}]
};
me.callParent(arguments);
},
/**
* 加载数据
* @param {jegridview} grid 主功能列表
*/
loadData:function(grid){
var me = this,data = [];
//循环列表数据
grid.store.each(function(rec){
var html = [];
//读取列表的数据,进行展示
Ext.each(Object.keys(rec.data),function(key,i){
html.push(key+':'+rec.get(key));
if(i>3)return;
})
data.push({html:html.join(',')});
})
me.store.loadData(data);
}
});
2. 将自定义插件挂接到MainController中
/**
* 自定义功能主控制器
*/
Ext.define("PRO.demo.controller.MainController", {
extend: 'Ext.app.Controller',
init: function () {
var self = this;
var ctr = {}
self.control({ctr});
},
views: [
//加载引用的面板
'PRO.demo.view.GridView', //列表
]
});
3. 将MainController挂载到功能
4. 注册列表afterrender事件,将列表自定义插件挂载到列表上
代码如下:
function(self){
var grid = self;
//创建组件
var demoGrid = Ext.create('PRO.demo.view.GridView',{region:'south',height:400,mainGrid:grid});
//加载到列表的父容器下方,父容器布局是border
grid.demoGrid = grid.ownerCt.add(demoGrid);
}
5. 注册列表的load事件,列表加载完数据后,可以操作自定义列表插件
代码如下:
function(store,records){
var grid = store.gridObj
//执行demo插件的方法
grid.demoGrid.loadData(grid);
}
6. 插件页面展示效果
案例2
自定义编码,挂接到表单,根据表单赋值,同时赋值给当前自定义页面组件值
1. 创建demo文件FormView.js
/**
* 自定义功能的视图
*/
Ext.define("PRO.demo.view.FormView", {
extend: 'Ext.form.Panel',
alias: 'widget.demo.formview',
layout: 'column',
initComponent: function () {
var me = this;
me.defaults = {
labelAlign:'right',
margin:3,
xtype:'textfield',
columnWidth:.25
};
me.items = [{
fieldLabel:'自定义字段1',
name:'DEMO_FIELD1'
}, {
fieldLabel: '自定义字段2',
name: 'DEMO_FIELD2'
}, {
fieldLabel: '自定义字段3',
name: 'DEMO_FIELD3'
}, {
fieldLabel: '自定义字段4',
name: 'DEMO_FIELD4'
}]
me.callParent(arguments);
},
/**
* 加载数据
* @param {jeformview} form 主功能表单
* @param {Object} values 主功能表单数据
*/
loadData: function (form,values) {
var me = this, data = {};
Ext.each(Object.keys(values),function(key,i){
data['DEMO_FIELD'+(i+1)] = values[key];
//只处理前四个字段
if(i==3)return;
})
me.form.setvalues(data);
}
});
2. 将自定义插件挂接到MainController中
/**
* 自定义功能主控制器
*/
Ext.define("PRO.demo.controller.MainController", {
extend: 'Ext.app.Controller',
init: function () {
var self = this;
var ctr = {}
self.control({ctr});
},
views: [
//加载引用的面板
'PRO.demo.view.GridView', //列表
'PRO.demo.view.FormView', //表单
]
});
3. 将MainController挂载到功能
4. 注册表单afterrender事件,将表单自定义插件挂载到表单上
代码如下:
function(self){
var form = self;
//创建demo组件
var demoForm = Ext.create('PRO.demo.view.FormView',{columnWidth:1,mainForm:form});
//将组件加入到表单
form.demoForm = form.getFormBox().add(demoForm)
}
5. 注册表单的setvalues自定义事件,表单赋值后,可以操作自定义列表插件
代码如下:
function(form,values){
//执行demo插件的方法
form.demoForm.loadData(form,values);
}
6. 插件页面展示效果
最后编辑: 呼丽华 文档更新时间: 2024-08-21 10:58 作者:肖海杰