- /*
- * 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的时候 添加此内容