EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维

vb2005xu

浏览: 1779989 次
性别:
来自: 北京

最近访客更多访客>>

秋之风245

lukeme

liugm1

SeerMi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FleaPHP/QEEPHP 资料

fckeditor EXT UI Web Ajax

代码如下,刚学习EXT,感觉比使用DOJO畅快许多,不像<<征服AJAX dojo,prototype,script.aculo.us>>书中作者使用的DOJO是0.4的版本,我下的是1.1的版本,结果许多组件的命名空间都变了,书中讲的代码等于是废的.前面的prototype,script.aculo.us到是讲的不错,但是不深. 所以后面自己也就废弃了DOJO的学习,学习了EXT.

我是PHP程序员,做PHP也就意味着不能像JAVA,.NET一样使用服务器端组件,更没有服务端AJAX组件了...

我是从JAVA web开发者转到PHP的,之前参与过北京市旅游局系统二期改造项目和中关村高新技术园调查的开发,

使用工作流组件开发相当快. 转到PHP后刚开始有些不太适应,几个月后也就适应了,学习到了很多东西.包括开发思维的转变.

这里总结了一些经验:

1. 使用一套PHP4/PHP5兼容框架,推荐使用FLEAPHP,使用好几个月了,相当的好用.

2. 熟悉SMARTY 这个模板框架是必须学会的,即使你是程序员

3. 熟悉MVC结构,这个是最重要的.如果你不想在后期狂改代码的话

[对于PHP我只分出VC和DAO层,一般只需要这两个]

4. 要求会使用JS开发,知道使用OOP来写JS. 至少熟悉Prototype框架

5. 对做企业应用的话EXT是不能少的,虽然我到现在还不知道它的版权到底是怎样的.我没有找到

[说是GPL3 或者LGPL 但是仍然要收费,做多个项目是不是要求购买OEM版的,我也不知道,所以决定购买一套UCREN]

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维,要及时转换思想</title>
<link rel="stylesheet" type="text/css" href="/ucren/extjs/js_source/resources/css/ext-all.css" />
<script type="text/javascript" src="/ucren/extjs/js_source/ext-base.js"></script>
<script type="text/javascript" src="/ucren/extjs/js_source/ext-all.js"></script>

<script type="text/javascript" src="/ucren/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="/ucren/extjs/app/extfckapp/FckExtjsCall.js"></script>

</head>

</body>
</html>

FckExtjsCall.js

Ext.onReady(function() {
var fckFormObj = new Ext.FormPanel({
  labelWidth:75,
  url:"",
  title:"EXT/FCKEditor 集成 -- vb2005xu | cdlinux.ys168.com",
  bodyStyle:"padding:5px 5px 0",
  defaultType:"form",
  buttons:[
   {
    text:"Save" ,
    type:'submit',
    handler: function(){
     //获取fckeditor内容赋给textarea
     Ext.get('fckInstance').dom.value = "jjj";//fckobj.GetXHTML(true) + '提交后';
     Ext.MessageBox.alert('FCK内容',Ext.get('fckInstance').dom.value);
     if (fckFormObj.form.isValid())
     {
      //创建响应测试函数
      var fckobj_temp = FCKeditorAPI.GetInstance('fckInstance');
      //fckobj_temp.UpdateLinkedField();//此方法被绑定到submit事件

      fckFormObj.form.doAction('submit',{
       url:'submit.php',
       method:'post',
       waitMsg:'正在提交,请稍等...',
        success:function(form,action){//成功
        showInfo('Success',fckobj_temp.GetXHTML(true));
        } ,
        failure:function(form,action){//失败
        showInfo('Failed','网络中断造成连接失败');
        }
      });
     }
    }
   },
   {
    text:"Cancel"
   }
  ],
  items:[{
      xtype:"textarea",
      fieldLabel:"编辑",
      labelSeparator:"：",
      id:"fckInstance", //div节点，这里要挂接FCKeditor编辑器
      name:"fckInstance",
      width:736,
      height:371
  }]
});
fckFormObj.render(document.body);

/*创建Fckeditor对象 -- 构造函数指出了Fckeditor要挂接的id,上文中的xtype : 'textarea'指定*/
//在页面上要求挂载fckeditor/fckeditor.js文件
var fckobj = new FCKeditor('fckInstance',810,350);
fckobj.BasePath = "/ucren/fckeditor/" ;
fckobj.ToolbarSet = 'Default' ;
fckobj.ReplaceTextarea();

//创建响应测试函数
function msgBox()
{
  var fckobj_temp = FCKeditorAPI.GetInstance('fckInstance');
  fckobj_temp.UpdateLinkedField();//此方法被绑定到submit事件
  Ext.MessageBox.alert('FCK内容',fckobj_temp.GetXHTML( true ));

}

function showInfo(tip,str){
  var win = new Ext.Window({
   title: '信息提交应答提示 -- ' + tip,
   width: 400 , height: 200 ,autoScroll: true ,
   html: '<h1>'+ str +'</h1>'
  });
  win.show();
}
});

submit.php

这个是一个空文件可以自己添加内容 .

以下是工程代码结构图

卷 kong 的文件夹 PATH 列表
卷序列号码为 00003AB9 6CED:1D77
G:.
├─.cache
├─.settings
├─blog
├─extjs
│ ├─app
│ │ ├─extfckapp
│ │ └─ExtremeWebManager
│ └─js_source
│      └─resources
│          ├─css
│          └─images
│              ├─default
│              │ ├─box
│              │ ├─button
│              │ ├─dd
│              │ ├─editor
│              │ ├─form
│              │ ├─grid
│              │ ├─layout
│              │ ├─menu
│              │ ├─panel
│              │ ├─progress
│              │ ├─qtip
│              │ ├─shared
│              │ ├─sizer
│              │ ├─slider
│              │ ├─tabs
│              │ ├─toolbar
│              │ ├─tree
│              │ └─window
│              ├─gray
│              │ ├─button
│              │ ├─panel
│              │ ├─qtip
│              │ ├─tabs
│              │ ├─toolbar
│              │ └─window
│              └─vista
│                  ├─basic-dialog
│                  ├─grid
│                  ├─layout
│                  ├─qtip
│                  ├─sizer
│                  ├─tabs
│                  └─toolbar
├─fckeditor
│ └─editor
│      ├─css
│      │ ├─behaviors
│      │ └─images
│      ├─dialog
│      │ ├─common
│      │ │ └─images
│      │ ├─fck_about
│      │ ├─fck_docprops
│      │ ├─fck_flash
│      │ ├─fck_image
│      │ ├─fck_link
│      │ ├─fck_select
│      │ ├─fck_spellerpages
│      │ │ └─spellerpages
│      │ │      └─server-scripts
│      │ └─fck_template
│      │      └─images
│      ├─dtd
│      ├─filemanager
│      │ ├─browser
│      │ │ └─default
│      │ │      ├─images
│      │ │      │ └─icons
│      │ │      │      └─32
│      │ │      └─js
│      │ └─connectors
│      │      ├─asp
│      │      ├─aspx
│      │      ├─cfm
│      │      ├─lasso
│      │      ├─perl
│      │      ├─php
│      │      └─py
│      ├─images
│      │ └─smiley
│      │      └─msn
│      ├─js
│      ├─lang
│      ├─plugins
│      │ ├─autogrow
│      │ ├─bbcode
│      │ │ └─_sample
│      │ ├─dragresizetable
│      │ ├─placeholder
│      │ │ └─lang
│      │ ├─simplecommands
│      │ └─tablecommands
│      ├─skins
│      │ ├─default
│      │ │ └─images
│      │ ├─office2003
│      │ │ └─images
│      │ └─silver
│      │      └─images
│      └─_source
│          ├─classes
│          ├─commandclasses
│          └─internals
├─json
├─phplibs
│ ├─FLEA
│ │ ├─FLEA
│ │ │ ├─Ajax
│ │ │ ├─Com
│ │ │ │ └─RBAC
│ │ │ │      └─Exception
│ │ │ ├─Config
│ │ │ ├─Controller
│ │ │ ├─Db
│ │ │ │ ├─Driver
│ │ │ │ └─Exception
│ │ │ ├─Dispatcher
│ │ │ │ └─Exception
│ │ │ ├─Exception
│ │ │ ├─Filter
│ │ │ ├─Helper
│ │ │ ├─Rbac
│ │ │ │ └─Exception
│ │ │ ├─Session
│ │ │ ├─View
│ │ │ │ └─Exception
│ │ │ └─_Errors
│ │ │      ├─chinese-gb2312
│ │ │      ├─chinese-utf8
│ │ │      ├─default
│ │ │      └─_common
│ │ └─_Cache
│ └─Smarty
│      ├─internals
│      └─plugins
├─prototype
├─taskofpig
│ ├─Controller
│ ├─Dao
│ ├─js
│ ├─music
│ ├─tpl
│ ├─tpl_c
│ └─_log
├─ucren-documentation
│ ├─common
│ └─images
│      └─bigicons
└─ucren-engine
    ├─classes
    │ ├─animation
    │ ├─net
    │ └─patch
    └─resource
        └─skins
            └─qq

查看图片附件

分享到：

ajax实时任务提示功能的实现 -- vb2005xu自 ... | 我们是怎样的一代人? -- 八零后

2008-08-18 13:54
浏览 2409
评论(8)
论坛回复 / 浏览 (8 / 6358)
分类:Web前端
查看更多

8 楼 vb2005xu 2008-12-01

bevin_b 写道

虽然EXT官方论坛上的那个例子也写的不怎么样，但是起码做到了基本的控件化...所以您不用在论坛上到处发贴炫耀这点东西吧

有中文的么?? 你这么牛,怎么也没见你写出来啊,敝帚自珍的东西?

7 楼 bevin_b 2008-10-28

虽然EXT官方论坛上的那个例子也写的不怎么样，但是起码做到了基本的控件化...所以您不用在论坛上到处发贴炫耀这点东西吧

6 楼 ecchanger 2008-09-22

siemens800 写道

帅哥，我想知道你的工程代码结构图是怎么导出来的这个很方便

tree + 目录名

5 楼 siemens800 2008-09-12

帅哥，我想知道你的工程代码结构图是怎么导出来的这个很方便

4 楼 vb2005xu 2008-08-20

jianfeng008cn 昨天你留在上边的demo能否给些详细解释,是关于JS闭包的么?这个我看不明白,还请多多指教

3 楼 jianfeng008cn 2008-08-18

<pre name='code' class='js'>(function(某可能冲突的变量){

某可能冲突的变量('某可能冲突的变量为JQuery').html();

})(JQuery)

</pre>

<pre name='code' class='js'>(function(某可能冲突的变量){

某可能冲突的变量('某可能冲突的变量为Prototype').html();

})(Prototype)</pre>

2 楼 vb2005xu 2008-08-18

你说得不错,在textarea的render事件中实例化fckeditor是更好些,代码结构更紧促一些,其实这个是从两方面出发的:1. 使用的PDT的插件JSEclipse的代码自动完成,对JSON结构支持的不好;2. 从我个人来讲我觉得将非EXTJS的代码类与其相分离比较好,闭包的概念我还不熟悉. 希望各位不吝赐教

1 楼 Saro 2008-08-18

在textarea的render事件中实例化fckeditor是否更好些呢。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论