extjs6 基础组件扩展和自定义组件封装--04静态js方法的设计思想

在03章中讲到了系统的静态方法类,下面对部分静态方法特别的说明。为什么需要这样做。

1、EU.RS(config) 是ajax请求静态方法。项目中常用的写法是Ext.Ajax.request(config),如果这样写存在几个问题:

     1)、每个请求都要做异常捕获或者提醒。

     2)、如果有自定义异常无法统一处理,不好统一写错误日志。

     3)、如果系统调整为跨域模式。那么请求方式应该是Ext.data.JsonP.request(config);

     主要问题就是:无法对ajax请求统一管理,如果存在变动,整个系统的请求都要修改。


2、EU.toastInfo 、EU.toastWarn、EU.toastErrorInfo 、EU.showMsg更好的统一错误信息提示风格和显示位置。


3、PU.openTabModule 系统主窗口的Tabpanel容器。可以方便系统中任何js类中打开一个新窗口。


4、PU.openModule 系统弹出新窗口写法,弹出一个systemMenuEdit子窗口,当子窗口操作完成后执行回调方法,返回结果给主窗口。我看到很多人直接把store对象传递给子窗口,这样其实是不合理的。这样导致子窗口和主窗口做了绑定。其他的窗口无法调用这个子窗口。所以主窗口和子窗口的交互应该是数据层面,不应该是操作对象

PU.openModule({title:title,xtype:"systemMenuEdit",width:500,params:params,scope:this,callback:function(result){
   //结果回调	    
}});


5、 PU.download 系统中文件下载。因为系统中文件下载可能会出现错误,应该统一管理下载,如果下载出现错误,统一错误页面,而不是让每个程序员独立去完成下载代码。

PU.download({url:"http://xxxxxx.do"})


6、 Config  系统配置文件。其中sub 为用户登录后用户信息对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS 中自定义一个 textarea 组件并显示行号,可以通过下面两种方式实现: 1. 使用 Ext.ux.form.field.CodeMirror 组件 使用 Ext.ux.form.field.CodeMirror 组件可以非常方便地实现 textarea 组件显示行号的功能。该组件基于 CodeMirror 编辑器实现,支持语法高亮、自动补全等功能。 示例代码: ``` Ext.define('MyApp.view.MyTextArea', { extend: 'Ext.ux.form.field.CodeMirror', alias: 'widget.mytextarea', initComponent: function() { this.callParent(); this.editor.setOption('lineNumbers', true); } }); ``` 在组件的 `initComponent` 方法中,设置 `lineNumbers` 选项为 `true` 即可显示行号。 2. 使用 Ext.form.field.TextArea 组件 如果不想使用 CodeMirror 编辑器,也可以通过自定义渲染函数来实现 textarea 组件显示行号的功能。具体实现方式如下: 示例代码: ``` Ext.define('MyApp.view.MyTextArea', { extend: 'Ext.form.field.TextArea', alias: 'widget.mytextarea', afterRender: function() { this.callParent(); this.mon(this.inputEl, 'scroll', this.onScroll, this); this.mon(this.inputEl, 'resize', this.onResize, this); this.mon(this.inputEl, 'keydown', this.onKeyDown, this); this.mon(this.inputEl, 'keyup', this.onKeyUp, this); this.mon(this.inputEl, 'mousedown', this.onMouseDown, this); this.mon(this.inputEl, 'mouseup', this.onMouseUp, this); this.mon(this.inputEl, 'dblclick', this.onDblClick, this); this.mon(this.inputEl, 'contextmenu', this.onContextMenu, this); this.updateLineNumber(); }, onScroll: function() { this.updateLineNumber(); }, onResize: function() { this.updateLineNumber(); }, onKeyDown: function() { this.updateLineNumber(); }, onKeyUp: function() { this.updateLineNumber(); }, onMouseDown: function() { this.updateLineNumber(); }, onMouseUp: function() { this.updateLineNumber(); }, onDblClick: function() { this.updateLineNumber(); }, onContextMenu: function() { this.updateLineNumber(); }, updateLineNumber: function() { var text = this.getValue(); var lineNumber = text.split(/\r?\n/).length; var lineNumberHtml = ''; for (var i = 1; i <= lineNumber; i++) { lineNumberHtml += i + '<br/>'; } this.getEl().down('.line-number').update(lineNumberHtml); }, getSubTplMarkup: function(values) { return this.callParent([Ext.apply({}, values, { inputCls: 'x-form-textarea', value: values.value && Ext.util.Format.htmlEncode(values.value), lineNumber: true })]); }, getSubTplData: function(fieldData) { var data = this.callParent([fieldData]); if (fieldData.lineNumber) { data.inputWrapCls = (data.inputWrapCls || '') + ' x-form-textarea-with-number'; data.afterInputEl = '<div class="line-number"></div>'; } return data; } }); ``` 在组件的 `afterRender` 方法中,绑定 `scroll`、`resize`、`keydown`、`keyup`、`mousedown`、`mouseup`、`dblclick` 和 `contextmenu` 事件,当组件内容发生变化时更新行号。在 `updateLineNumber` 方法中,计算组件内容的行数,并生成对应的 HTML 代码插入到组件 DOM 中。在 `getSubTplData` 和 `getSubTplMarkup` 方法中,通过添加 CSS 类和 HTML 代码实现行号的显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值