1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    Infelix is on a distinguished road

      0  

    Default Problem with HtmlEditor

    Problem with HtmlEditor


    Hello.
    I tried to reproduce "Portal Demo" example (http://dev.sencha.com/deploy/ext-4.0...al/portal.html) in my project...
    But i had problem with HtmlEditor.
    When i type some text into editor and after that try to drag it into other place on panel - text disappeared.

    Browser versions tested against:
    Chrome ver. 12.0.742.124
    Firefox 5.0

    Operating system:
    Ubuntu 11.04

    Ext version
    4.0.2a

    Can someone help me with it, please?

    P.S. i tried to find same problem anywhere - but i didn't.
    P.P.S sorry for my english, if it not so good

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    Infelix is on a distinguished road

      0  

    Default


    i added into this example a new item : RichEdit - extension of class htmlEdit

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    Infelix is on a distinguished road

      0  

    Default


    code of this example (with htmlEditor):
    Code:
    ​Ext.define('Ext.app.Portal', {
    
        extend: 'Ext.container.Viewport',
    
    
        uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
    
    
        getTools: function(){
            return [{
                xtype: 'tool',
                type: 'gear',
                handler: function(e, target, panelHeader, tool){
                    var portlet = panelHeader.ownerCt;
                    portlet.setLoading('Working...');
                    Ext.defer(function() {
                        portlet.setLoading(false);
                    }, 2000);
                }
            }];
        },
    
    
        initComponent: function(){
            var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
    
    
            Ext.apply(this, {
                id: 'app-viewport',
                layout: {
                    type: 'border',
                    padding: '0 5 5 5' // pad the layout from the window edges
                },
                items: [{
                    id: 'app-header',
                    xtype: 'box',
                    region: 'north',
                    height: 40,
                    html: 'Ext Portal'
                },{
                    xtype: 'container',
                    region: 'center',
                    layout: 'border',
                    items: [{
                        id: 'app-options',
                        title: 'Options',
                        region: 'west',
                        animCollapse: true,
                        width: 200,
                        minWidth: 150,
                        maxWidth: 400,
                        split: true,
                        collapsible: true,
                        layout: 'accordion',
                        layoutConfig:{
                            animate: true
                        },
                        items: [{
                            html: content,
                            title:'Navigation',
                            autoScroll: true,
                            border: false,
                            iconCls: 'nav'
                        },{
                            title:'Settings',
                            html: content,
                            border: false,
                            autoScroll: true,
                            iconCls: 'settings'
                        }]
                    },{
                        id: 'app-portal',
                        xtype: 'portalpanel',
                        region: 'center',
                        items: [{
                            id: 'col-1',
                            items: [{
                                id: 'portlet-1',
                                title: 'Grid Portlet',
                                tools: this.getTools(),
                                items: Ext.create('Ext.app.GridPortlet'),
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            },{
                                id: 'portlet-2',
                                title: 'Portlet 2',
                                tools: this.getTools(),
                                html: content,
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            }]
                        },{
                            id: 'col-2',
                            items: [{
                                id: 'portlet-3',
                                title: 'Portlet 3',
                                tools: this.getTools(),
                                html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            },
                            {
                                id: 'portlet-6',
                                title: 'HtmlEditor',
                                tools: this.getTools(),
                                items: Ext.create('Ext.app.RichEdit'),
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            }]
                        },{
                            id: 'col-3',
                            items: [{
                                id: 'portlet-4',
                                title: 'Stock Portlet',
                                tools: this.getTools(),
                                items: Ext.create('Ext.app.ChartPortlet'),
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            },
                            {
                                id: 'portlet-5',
                                title: 'Image',
                                tools: this.getTools(),
                                items: Ext.create('Ext.Img', {
                                            src: 'http://www.sencha.com/img/20110215-feat-html5.png',
                                            renderTo: Ext.getBody()
                                        }),
                                listeners: {
                                    'close': Ext.bind(this.onPortletClose, this)
                                }
                            }]
                        }]
                    }]
                }]
            });
            this.callParent(arguments);
        },
    
    
        onPortletClose: function(portlet) {
            this.showMsg('"' + portlet.title + '" was removed');
        },
    
    
        showMsg: function(msg) {
            var el = Ext.get('app-msg'),
                msgId = Ext.id();
    
    
            this.msgId = msgId;
            el.update(msg).show();
    
    
            Ext.defer(this.clearMsg, 3000, this, [msgId]);
        },
    
    
        clearMsg: function(msgId) {
            if (msgId === this.msgId) {
                Ext.get('app-msg').hide();
            }
        }
    });
    class Ext.app.RichEdit is an extension of class htmlEdit

    Code:
    Ext.define('Ext.app.RichEdit', {
           extend: 'Ext.form.field.HtmlEditor',        
    })
    rest of example i keep unchanged

    P.S. sorry for my english again )

Tags for this Thread