extjs htmleditor设置文本的颜色和字体样式
Ext.ComponentQuery.query('htmleditor')[0].textareaEl.setStyle({color: "red"});
Ext.DomHelper.applyStyles(Ext.ComponentQuery.query('htmleditor')[0].getEditorBody(),Ext.ComponentQuery.query('htmleditor')[0].textareaEl.getStyles('color))
设置颜色代码
Ext.ComponentQuery.query('htmleditor')[0].textareaEl.setStyle({'font-family': "Verdana"})
Ext.DomHelper.applyStyles(Ext.ComponentQuery.query('htmleditor')[0].getEditorBody
(),Ext.ComponentQuery.query('htmleditor')[0].textareaEl.getStyles('font-family'))
设置字体样式代码
在extjs中找到以下文件absform.js替换代码如下在tomcat中打开absform.html
Ext.require([
'Ext.form.*',
'Ext.layout.container.Absolute',
'Ext.window.Window'
]);
Ext.onReady(function() {
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var form = Ext.create('Ext.form.Panel', {
layout: 'absolute',
url: 'save-form.php',
defaultType: 'textfield',
border: false,
items: [{
fieldLabel: 'Send To',
fieldWidth: 60,
msgTarget: 'side',
allowBlank: false,
x: 5,
y: 5,
name: 'to',
anchor: '-5' // anchor width by percentage
}, {
fieldLabel: 'Subject',
fieldWidth: 60,
x: 5,
y: 35,
name: 'subject',
anchor: '-5' // anchor width by percentage
}, {
x:5,
y: 65,
xtype: 'textarea',
style: 'color:red',
hideLabel: true,
name: 'msg',
cls:'x-form-field x-form-text',
value:'dfghj',
anchor: '-5 -5',// anchor width and height
}]
});
var a=Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});
var win = Ext.create('Ext.window.Window', {
title: 'Resize Me',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: form,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win.show();
var win1 = Ext.create('Ext.window.Window', {
title: 'Resize Me',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: a,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win1.show();
var c= new Ext.form.Panel({
title: 'Editorad',
defaultType: 'textfield',
renderTo: Ext.getBody(),
width: 550,
height: 250,
frame: true,
layout: 'fit',
enableLists : false,
enableLinks : false,
enableFontSize:false,
items: [{
xtype: 'htmleditor',
name:'wang',
value:'abdfghj',
style:{color:'#eee',
width:'20%'},
cls:'x-html-editor-wrap textarea',
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.textareaEl.setStyle({color: "red"});
Ext.ComponentQuery.query('htmleditor')[0].focus('true',1);
}
},
html:Ext.ComponentQuery.query('form textarea[name=msg]')[0].getValue(),
enableColors: true,
enableAlignments: false,
enableLists : false,
enableLinks : false,
enableFontSize:true,
enableSourceEdit:false,
enableFormat:false,
enableColors :true,
enableFont : true,
},{
x:5,
y: 65,
xtype: 'textarea',
style: 'color:red',
hideLabel: true,
name: 'msg1',
cls:'x-form-field x-form-text',
value:'dfghj',
anchor: '-5 -5',// anchor width and height
}]
});
var win2 = Ext.create('Ext.window.Window', {
title: 'Resize Me',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: c,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win2.show();
});
google chrome调试效果图
字体视界
2024-09-30 广告
