extjs750 拖拽动态布局组件dashboard用法和样例
小编:管理员 703阅读 2022.09.07
版本
7.5.0 classic
主要组件Ext.dashboard.Dashboard仪表板组件,可实现动态拖拽布局 主要配置项:
- parts 仪表板要使用的parts定义,使用键值对形式传入parts.id和psrts.config的映射
- columnWidths 仪表板分列默认列宽数组
- defaultContent 默认的项目配置.
用于创建仪表板项目的组件工厂 主要配置项:
- viewTemplate 视图模板创建仪表板项目配置的模板,模板的绑定值通过配置参数传入,也可以通过displayForm传入 默认值为:
{ collapsed: '{collapsed}', columnIndex: '{columnIndex}', id: '{id}', title: '{title}', height: '{height}' }复制
- displayForm 使用dashboard.addNew时触发此函数,可以在此处处理配置参数,或通过弹窗等方式让用户输入额外的配置参数 默认值为:
displayForm: function(instance, currentConfig, callback, scope) { callback.call(scope || this, {}); }复制样例
- ViewPart 根据viewType配置项嵌入其他应用视图或组件
Ext.define('MyApp.ViewPart', { extend: 'Ext.dashboard.Part', alias: 'part.view', viewTemplate: { header: false, layout: 'fit', items: [{ xtype: '{viewType}' }] }, displayForm: function (instance, currentConfig, callback, scope) { const me = this, title = instance ? '编辑视图类型' : '添加视图'; Ext.Msg.prompt(title, 'View type', function (btn, text) { if (btn === 'ok') { var config = { viewType: text }; callback.call(scope || me, config); } }, me, false, currentConfig ? currentConfig.viewType : ''); } });复制
- Dashboard
{ xtype: 'dashboard', columnWidths:[0.3,0.7], parts: { widget1: { viewTemplate: { // 一般视图配置 title: 'Widget 1', html: 'Widget 1' } }, widget2: { viewTemplate: { title: 'Widget 2', html: 'Widget 2' } }, widget3: { viewTemplate: { title: 'Widget 3', html: 'Widget 3' } }, viewPart: { // 使用自定义的part工厂 type: 'view' } }, defaultContent: [{ type: 'widget1', //maps to the parts key columnIndex: 0 }, { type: 'widget3', columnIndex: 0 }, { type: 'widget2', columnIndex: 1 }, { type: 'viewPart', //maps to the parts key xtype: 'myview', columnIndex: 0 }] }复制
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…