Extjs中form组件居中显示解决方法之一

最近在学习Extjs,感觉其无论是在界面还是相关功能上都能的到很好的用户体验。

由于刚刚接触,所以对一切都还很陌生,只有自己一步一步的探索着学习。

在初建一个小例子的时候,遇到了form表单无论如何也不居中的问题,在网上搜索了好久,也没有发现formpanel的相关属性。

我解决的办法有点牵强,希望能对一些朋友有些帮助。】

我是通过table控制的,有关代码如下:

<table align='center'>
    <td >
      <div name="form" id="form"></div>
    </td>
</table>

貌似很简单,但却花了我好长时间,显示效果还不是很理想。

效果如下:


肯定还存在更好的办法……

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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 代码实现行号的显示

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值