Ext 一个聊天窗口的设计

最新推荐文章于 2011-06-19 11:12:27 发布

最新推荐文章于 2011-06-19 11:12:27 发布 · 174 阅读

文章标签：

#EXT #浏览器 #HTML

extjs 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何实现网页元素的弹性布局，确保组件能够自动适应不同尺寸的浏览器窗口。此外，还探讨了HtmlEditor中如何对Ctrl+Enter组合键进行特殊处理，包括在编辑模式与普通模式下对键盘事件的不同响应。

1.关键是要弹性设计，自动适应浏览器

部件要:

height:auto = autoHeight:true

width:auto = autoWidth:true

父容器要：

overflow:auto = autoScroll : true

2. HtmlEditor 对于 ctr-enter 感应特殊处理，因为他是套在一个 iframe 里的

//event for source editing mode
   new Ext.KeyMap(Ext.getCmp("htmleditor").getEl(), [
   {
        key: 13,
        ctrl:true,
        stopEvent :true,
        fn: send
    }
]);
    
    
     //event for normal mode
Ext.getCmp("htmleditor").onEditorEvent = function(e){
   this.updateToolbar();
   var keyCode = (document.layers) ? keyStroke.which : e.keyCode;
   if (keyCode == 13 && e.ctrlKey) send(); //it'a my handler
}

示例代码：

放在 example/layout/chat.html