ExtJs学习笔记(18)_ExtJs嵌入FCK示例

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<! 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" />
    
< link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css"   />
     
< script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
    
< script  type ="text/javascript"  src ="../ext-all-debug.js" ></ script >  
    
< script  type ="text/javascript"  src ="../Extjs_Intellisense.js" ></ script >
    
< script  type ="text/javascript"  src ="../fckeditor/fckeditor.js" ></ script >
    
< title > Layout_Border示例 </ title >     
</ head >
< body >

< script  type ="text/javascript" >
    Ext.onReady(
function () {

        
var  win  =   new  Ext.Window({
            title: 
" 修改个人信息 " ,
            width: 
800 ,
            height: 
410 ,
            layout: 
" fit " ,
            modal: 
true ,
            frame: 
true ,
            plain: 
true ,
            resizable: 
false ,
            items: 
new  Ext.TabPanel({
                activeTab: 
0 ,
                frame: 
true ,
                items:
                    [
                        {
                            title: 
" 个人信息 " ,
                            items:
                            [{
                                title: 
" 自我介绍 " ,
                                xtype: 
" textarea " ,
                                id: 
" fckInstance " ,
                                name:
" fckInstance " ,                                                             
                                                            
                            }],
                            buttons: [{ text: 
" 保存 " }]
                            }
                    ]
            })
        });

        win.show();

        
var  fckobj  =   new  FCKeditor( ' fckInstance ' " 100% " " 100% " );
        fckobj.ToolbarSet 
=   ' Default ' ;
        fckobj.ReplaceTextarea();   
    });

    
</ script >
</ body >
</ html >

效果图:
目录
相关文章
|
8月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
76 0
|
8月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
98 0
|
前端开发 JavaScript 数据处理
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
|
前端开发 Python
Web前端学习:CSS基础【简介、基础语法、选择器、样式形式】
Web前端学习:CSS基础【简介、基础语法、选择器、样式形式】
135 0
Web前端学习:CSS基础【简介、基础语法、选择器、样式形式】
|
移动开发 前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
|
前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
|
移动开发 前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第二节 基本标签
Web前端开发笔记——第二章 HTML语言 第二节 基本标签
Web前端开发笔记——第二章 HTML语言 第二节 基本标签
|
前端开发 数据库
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
|
前端开发
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
|
前端开发
WBE前端笔记2:CSS中一些不熟悉的标签
WBE前端笔记2:CSS中一些不熟悉的标签