extjs form表单集成layui富文本编辑器的具体代码
时间: 2023-12-10 19:52:00 浏览: 27
以下是一个示例代码,用于在 ExtJS 中集成 layui 富文本编辑器:
```javascript
Ext.define('MyApp.view.form.MyFormPanel', {
extend: 'Ext.form.Panel',
xtype: 'myformpanel',
requires: [
'Ext.form.field.TextArea',
'Ext.form.field.Hidden',
'Ext.form.field.Date',
'Ext.form.field.Number',
'Ext.form.field.ComboBox',
'Ext.form.FieldSet',
'Ext.layout.container.Column',
'Ext.ux.layui.Editor'
],
layout: 'column',
margin: 10,
items: [{
xtype: 'textfield',
fieldLabel: '标题',
name: 'title',
columnWidth: 1
}, {
xtype: 'datefield',
fieldLabel: '发布日期',
name: 'publishDate',
format: 'Y-m-d',
columnWidth: 0.5
}, {
xtype: 'numberfield',
fieldLabel: '排序',
name: 'sortOrder',
minValue: 0,
columnWidth: 0.5
}, {
xtype: 'combobox',
fieldLabel: '状态',
name: 'status',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data: [{
value: 'published',
text: '已发布'
}, {
value: 'draft',
text: '草稿'
}]
}),
queryMode: 'local',
displayField: 'text',
valueField: 'value',
columnWidth: 0.5
}, {
xtype: 'fieldset',
layout: 'anchor',
columnWidth: 1,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'hidden',
name: 'content'
}, {
xtype: 'layui-editor',
fieldLabel: '内容',
name: 'contentEditor',
height: 400,
listeners: {
initializeditor: function(editor) {
editor.setContent('默认内容');
}
}
}]
}]
});
```
在该代码中,我们使用了 ExtJS 的 form.Panel,其中包含了标题、发布日期、排序、状态和内容等表单项。对于内容这一项,我们使用了 layui-editor 组件来实现富文本编辑器。需要注意的是,我们还需要为内容项定义一个隐藏域(hidden),用于存储编辑器的内容。
在使用这段代码之前,需要先将 layui-editor 的 js 和 css 文件引入到项目中,并在 ExtJS 中定义 layui-editor 组件。