EXTJS4 求助

Question

 EXTJS的编辑器没有插入图片的功能。。网上找的很多都是之前版本的代码 本人比较菜 四的套不上以前的代码。。初学EXTJS 现在不知道要怎么做这个功能请各位大大指条明路。。   要怎么开始改这个htmleditor

Answer 1

 找不到extjs4相关的编辑器的代码啊  

Answer 2

UltraEdit就可以了，如果没别的代码，就是调API和Examples里的代码也不错。

Answer 3

不过，为了更好的看API，最好把它加到本地的一个虚拟目录下对了，全E文，有点挑战

Answer 4

UltraEdit  这个怎么用 像htmleditor一样用吗？

Answer 5

/**
* 重载EXTJS-HTML编辑器
* 
* @class HTMLEditor
* @extends Ext.form.HtmlEditor
* @author wuliangbo
*/
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
     addImage : function() {
        var editor = this;
        var imgform = new Ext.FormPanel({
             region : 'center',
             labelWidth : 55,
             frame : true,
             bodyStyle : 'padding:5px 5px 0',
             autoScroll : true,
             border : false,
             fileUpload : true,
             items : [{
                         xtype : 'textfield',
                         fieldLabel : '选择文件',
                         name : 'userfile',
                         inputType : 'file',
                         allowBlank : false,
                         blankText : '文件不能为空',
                         height : 25,
                         anchor : '90%'
                     }],
             buttons : [{
                 text : '上传',
                 type : 'submit',
                 handler : function() {
                    if (!imgform.form.isValid()) {return;}
                     imgform.form.submit({
                         waitMsg : '正在上传',
                         url : 'Default.aspx',
                         success : function(form, action) {
                            var element = document.createElement("img");
                             element.src = action.result.fileURL;
                            if (Ext.isIE) {
                                 editor.insertAtCursor(element.outerHTML);
                             } else {
                                var selection = editor.win.getSelection();
                                if (!selection.isCollapsed) {
                                     selection.deleteFromDocument();
                                 }
                                 selection.getRangeAt(0).insertNode(element);
                             }
                             win.hide();
                         },
                         failure : function(form, action) {
                             form.reset();
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                 Ext.MessageBox.alert('警告',
                                         action.result.errors.msg);
                         }
                     });
                 }
             }, {
                 text : '关闭',
                 type : 'submit',
                 handler : function() {
                     win.close(this);
                 }
             }]
         })        var win = new Ext.Window({
                     title : "上传图片",
                     width : 300,
                     height : 200,
                     modal : true,
                     border : false,
                     iconCls : "picture.png",
                     layout : "fit",
                     items : imgform                 });
         win.show();
     },
     createToolbar : function(editor) {
         HTMLEditor.superclass.createToolbar.call(this, editor);
        this.tb.insertButton(16, {
                     cls : "x-btn-icon",
                     icon : "picture.png",
                     handler : this.addImage,
                     scope : this
                 });
     }
});
Ext.reg('StarHtmleditor', HTMLEditor);
页面js代码htmledtior.js
Ext.onReady(function() {
     Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget = 'side';
    var ff = new Ext.FormPanel({
                 title : "文件上传",
                 renderTo : document.body,
                 width : 600,
                 height : 480,
                 labelWidth : 55,
                 frame : true,
                 items : [{
                             xtype : "textfield",
                             name : "title",
                             fieldLabel : "标题",
                             anchor : "98%"
                         }, {
                             xtype : "combo",
                             name : "topic_id",
                             fieldLabel : "所属栏目",
                             anchor : "98%"
                         }, {
                             xtype : "textfield",
                             name : "keywords",
                             fieldLabel : "关键字",
                             anchor : "98%"
                         }, {
                             xtype : "StarHtmleditor",
                             name : "content",
                             fieldLabel : "内容",
                             anchor : "98%"
                         }]
     });});

Answer 6

后台代码简单实现了一下Code
protected void Page_Load(object sender, EventArgs e)
         {
             string fileName = string.Empty;
             string fileURL = string.Empty;
             string rt = string.Empty;
            try
             {
                 HttpPostedFile file = Request.Files[0];
                 fileName = GetFileName(file.FileName);
                 file.SaveAs(Server.MapPath("upload\\") + fileName);
                 fileURL = "upload/" + fileName;
                 rt = "{success:'true',fileURL:'" + fileURL + "'}";
             }
            catch
             {
                 rt = "{success:'false',fileURL:'" + fileURL + "'}";
             } 
             
             Response.Write(rt);         }
        
         private string GetFileName(string FullName)
         {
             string fileName = string.Empty;
            int last = FullName.LastIndexOf(@"\");
             fileName = FullName.Substring(last + 1, FullName.Length - last - 1);
            return fileName;
         }

Answer 7

呃。这些代码要怎么改成extjs4的哦  我一直没改过去

Answer 8

在extjs4 上用不了啊 会有错误

Answer 9

{
xtype: 'filefield',
labelWidth: 50,
cls:'inputfiel',
msgTarget: 'side',
anchor: '100%',
buttonText: '图片上传',
listeners:{
change:function(ff,v){
    ///这里向后台请求上传图片
 }
}
}

Answer 10

Ext.reg('StarHtmleditor', HTMLEditor);HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 这两个在extjs4中已经不是这样用了  我改成extjs4的写法 一样实现不了 

Answer 11

我要的是在htmleditor里加上插入图片的按钮  这个是单独出来的吧

Answer 12

看官网文档的例子，用Dreamweaver就好