Ext.form.HtmlEditor 的 表情扩展
2008-08-06 17:42
691 查看
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteChooser
* viperasi@gmail.com
* 根据Ext.ColorPalette修改
* 文件名:EmoteChooser.js
*/
Ext.EmoteChooser = function(config){
Ext.EmoteChooser.superclass.constructor.call(this, config);
this.addEvents(
'select'
);
if(this.handler){
this.on("select", this.handler, this.scope, true);
}
};
Ext.extend(Ext.EmoteChooser, Ext.Component, {
itemCls : "emote-chooser",
value : null,
clickEvent:'click',
ctype: "Ext.EmoteChooser",
allowReselect : false,
emotes : [//表情列表
"001","002","003","004","005","006","007","008","009","010","011",
"012","013","014","015","016","017","018","019","020","021","022",
"023","024","025","026","027","028","029","030","031","032","033",
"034","035","036","037","038","039","040","041","042","043",
"044","045","046","047","048","049","050","051","052","053","054",
"055","056","057","058","059","060"
],
onRender : function(container, position){
var t = this.tpl || new Ext.XTemplate(
'<tpl for="."><a href="#" class="emote-{.}" hidefocus="on"><em><img src="images/emote/emote_{.}.gif" unselectable="on" /></em></a></tpl>'
);//套用模板，图片路径需自己修改
var el = document.createElement("div");
el.className = this.itemCls;
t.overwrite(el, this.emotes);
container.dom.insertBefore(el, position);
this.el = Ext.get(el);
this.el.on(this.clickEvent, this.handleClick, this, {delegate: "a"});
if(this.clickEvent != 'click'){
this.el.on('click', Ext.emptyFn, this, {delegate: "a", preventDefault:true});
}
},
afterRender : function(){
Ext.EmoteChooser.superclass.afterRender.call(this);
if(this.value){
var s = this.value;
this.value = null;
this.select(s);
}
},
handleClick : function(e, t){
e.preventDefault();
if(!this.disabled){
var c = t.className.match(/(?:^|/s)emote-(.{3})(?:/s|$)/)[1];
this.select(c.toUpperCase());
}
},
select : function(emote){
//emote = emote.replace("#", "");
if(emote != this.value || this.allowReselect){
var el = this.el;
if(this.value){
el.child("a.emote-"+this.value).removeClass("emote-chooser-sel");
}
el.child("a.emote-"+emote).addClass("emote-chooser-sel");
this.value = emote;
this.fireEvent("select", this, emote);
}
}
});
Ext.reg('emotechooser', Ext.EmoteChooser);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteItem
* viperasi@gmail.com
* 根据Ext.menu.ColorItem修改
* 文件名：EmoteItem.js
*/
Ext.menu.EmoteItem = function(config){
Ext.menu.EmoteItem.superclass.constructor.call(this, new Ext.EmoteChooser(config), config);
this.chooser = this.component;
this.relayEvents(this.chooser, ["select"]);
if(this.selectHandler){
this.on('select', this.selectHandler, this.scope);
}
};
Ext.extend(Ext.menu.EmoteItem, Ext.menu.Adapter);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteMenu
* viperasi@gmail.com
* 根据Ext.menu.ColorMenu修改
* 文件名：EmoteMenu.js
*/
Ext.menu.EmoteMenu = function(config){
Ext.menu.EmoteMenu.superclass.constructor.call(this, config);
this.plain = true;
var ci = new Ext.menu.EmoteItem(config);
this.add(ci);
this.chooser = ci.chooser;
this.relayEvents(ci, ["select"]);
};
Ext.extend(Ext.menu.EmoteMenu, Ext.menu.Menu);
/*
*调用示例
*
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>emote_chooser</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/EmoteChooser.js"></script>
<script type="text/javascript" src="js/EmoteItem.js"></script>
<script type="text/javascript" src="js/EmoteMenu.js"></script>
<style type="text/css"><!--css样式，必须存在，可写入ext-all.css -->
.emote-chooser{width:150px;height:92px;cursor:pointer;}
.emote-chooser a{border:1px solid #fff;float:left;padding:2px;text-decoration:none;-moz-outline:0 none;outline:0 none;cursor:pointer;}
.emote-chooser a:hover,.emote-chooser a.emote-chooser-sel{border:1px solid #8BB8F3;background:#deecfd;}
.emote-chooser em{display:block;border:1px solid #ACA899;}
.emote-chooser em img{cursor:pointer;display:block;height:20px;line-height:10px;width:20px;}
</style>
<script language="javascript">
Ext.onReady(function(){
var emoteMenu = new Ext.menu.EmoteMenu({
allowReselect: true,
focus: Ext.emptyFn,
plain:true,
selectHandler: function(cm, emote){
Ext.example.msg('Emote Selected', 'You choose {0}.', emote);
},
scope: this,
clickEvent:'mousedown'
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'emote',
iconCls: 'bmenu', // <-- icon
menu: emoteMenu // assign menu by instance
});
});
</script>
</head>
<body>
<div id="container">
<div id="toolbar"></div>
</div>
</body>
</html>
附上 HtmlEditor的添加示例：
var editor = new Ext.form.HtmlEditor({
//内容略
});
editor.getToolbar().add('-', {
tooltip : '选择表情',
iconCls : 'temote',
menu : new Ext.menu.EmoteMenu({
allowReselect : true,
focus : Ext.emptyFn,
plain : true,
selectHandler : function(cm, emote) {
var emimg = "<img src='images/emote/emote_"
+ emote + ".gif' />";
editor.insertAtCursor(emimg);
},
scope : this,
clickEvent : 'mousedown'
})
})；
此代码不全，请在form 或者 win 被show 或者 render的时候 添加此内容
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteChooser
* viperasi@gmail.com
* 根据Ext.ColorPalette修改
* 文件名:EmoteChooser.js
*/
Ext.EmoteChooser = function(config){
Ext.EmoteChooser.superclass.constructor.call(this, config);
this.addEvents(
'select'
);
if(this.handler){
this.on("select", this.handler, this.scope, true);
}
};
Ext.extend(Ext.EmoteChooser, Ext.Component, {
itemCls : "emote-chooser",
value : null,
clickEvent:'click',
ctype: "Ext.EmoteChooser",
allowReselect : false,
emotes : [//表情列表
"001","002","003","004","005","006","007","008","009","010","011",
"012","013","014","015","016","017","018","019","020","021","022",
"023","024","025","026","027","028","029","030","031","032","033",
"034","035","036","037","038","039","040","041","042","043",
"044","045","046","047","048","049","050","051","052","053","054",
"055","056","057","058","059","060"
],
onRender : function(container, position){
var t = this.tpl || new Ext.XTemplate(
'<tpl for="."><a href="#" class="emote-{.}" hidefocus="on"><em><img src="images/emote/emote_{.}.gif" unselectable="on" /></em></a></tpl>'
);//套用模板，图片路径需自己修改
var el = document.createElement("div");
el.className = this.itemCls;
t.overwrite(el, this.emotes);
container.dom.insertBefore(el, position);
this.el = Ext.get(el);
this.el.on(this.clickEvent, this.handleClick, this, {delegate: "a"});
if(this.clickEvent != 'click'){
this.el.on('click', Ext.emptyFn, this, {delegate: "a", preventDefault:true});
}
},
afterRender : function(){
Ext.EmoteChooser.superclass.afterRender.call(this);
if(this.value){
var s = this.value;
this.value = null;
this.select(s);
}
},
handleClick : function(e, t){
e.preventDefault();
if(!this.disabled){
var c = t.className.match(/(?:^|/s)emote-(.{3})(?:/s|$)/)[1];
this.select(c.toUpperCase());
}
},
select : function(emote){
//emote = emote.replace("#", "");
if(emote != this.value || this.allowReselect){
var el = this.el;
if(this.value){
el.child("a.emote-"+this.value).removeClass("emote-chooser-sel");
}
el.child("a.emote-"+emote).addClass("emote-chooser-sel");
this.value = emote;
this.fireEvent("select", this, emote);
}
}
});
Ext.reg('emotechooser', Ext.EmoteChooser);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteItem
* viperasi@gmail.com
* 根据Ext.menu.ColorItem修改
* 文件名：EmoteItem.js
*/
Ext.menu.EmoteItem = function(config){
Ext.menu.EmoteItem.superclass.constructor.call(this, new Ext.EmoteChooser(config), config);
this.chooser = this.component;
this.relayEvents(this.chooser, ["select"]);
if(this.selectHandler){
this.on('select', this.selectHandler, this.scope);
}
};
Ext.extend(Ext.menu.EmoteItem, Ext.menu.Adapter);
/*
* IChat Emote Chooser v0.1
* IChat Emote Chooser -- EmoteMenu
* viperasi@gmail.com
* 根据Ext.menu.ColorMenu修改
* 文件名：EmoteMenu.js
*/
Ext.menu.EmoteMenu = function(config){
Ext.menu.EmoteMenu.superclass.constructor.call(this, config);
this.plain = true;
var ci = new Ext.menu.EmoteItem(config);
this.add(ci);
this.chooser = ci.chooser;
this.relayEvents(ci, ["select"]);
};
Ext.extend(Ext.menu.EmoteMenu, Ext.menu.Menu);
/*
*调用示例
*
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>emote_chooser</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/EmoteChooser.js"></script>
<script type="text/javascript" src="js/EmoteItem.js"></script>
<script type="text/javascript" src="js/EmoteMenu.js"></script>
<style type="text/css"><!--css样式，必须存在，可写入ext-all.css -->
.emote-chooser{width:150px;height:92px;cursor:pointer;}
.emote-chooser a{border:1px solid #fff;float:left;padding:2px;text-decoration:none;-moz-outline:0 none;outline:0 none;cursor:pointer;}
.emote-chooser a:hover,.emote-chooser a.emote-chooser-sel{border:1px solid #8BB8F3;background:#deecfd;}
.emote-chooser em{display:block;border:1px solid #ACA899;}
.emote-chooser em img{cursor:pointer;display:block;height:20px;line-height:10px;width:20px;}
</style>
<script language="javascript">
Ext.onReady(function(){
var emoteMenu = new Ext.menu.EmoteMenu({
allowReselect: true,
focus: Ext.emptyFn,
plain:true,
selectHandler: function(cm, emote){
Ext.example.msg('Emote Selected', 'You choose {0}.', emote);
},
scope: this,
clickEvent:'mousedown'
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'emote',
iconCls: 'bmenu', // <-- icon
menu: emoteMenu // assign menu by instance
});
});
</script>
</head>
<body>
<div id="container">
<div id="toolbar"></div>
</div>
</body>
</html>
附上 HtmlEditor的添加示例：
var editor = new Ext.form.HtmlEditor({
//内容略
});
editor.getToolbar().add('-', {
tooltip : '选择表情',
iconCls : 'temote',
menu : new Ext.menu.EmoteMenu({
allowReselect : true,
focus : Ext.emptyFn,
plain : true,
selectHandler : function(cm, emote) {
var emimg = "<img src='images/emote/emote_"
+ emote + ".gif' />";
editor.insertAtCursor(emimg);
},
scope : this,
clickEvent : 'mousedown'
})
})；
此代码不全，请在form 或者 win 被show 或者 render的时候 添加此内容
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- Ext.widgets-form(上)BasicForm/ Field/ Checkbox/ Radio/ HtmlEditor/ TextField
- 编辑器字段字段Ext.form.field.HtmlEditor
- Ext 中，为Ext.form.HtmlEditor添加键盘事件
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor
- Ext.form.field.HtmlEditor编辑器字段
- 重写Ext.form.HtmlEditor
- Ext 中，为Ext.form.HtmlEditor添加键盘事件
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- Ext 中，为Ext.form.HtmlEditor添加键盘事件
- Ext.form.field.HtmlEditor编辑器字段
- Ext.form.DisplayField扩展组件：在formpanel中显示html格式的内容
- ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor（转）
- Ext.form.HtmlEditor获取和清空数据的方法
- Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
- Ext.form.HtmlEditor如何判断是否有输入
- (18)ExtJS之Ext.form.filed.HtmlEditor编辑器
- Ext.form.DisplayField扩展组件：在formpanel中显示html格式的内容