Migration ExtJs 3 to ExtJs 4

**luiggilamela** · 25 May 2012 8:15 AM

Hola a todos espero que puedan ayudarme a resolver este problema, estoy migrando de extJs 3 a extJs 4, ya compilo los paquetes de compatibilidad, pero aun no me muestra el formulario que cree, alguien me puede ayudar? aca les dejo el codigo.

Index.jsp:

Code:

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!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">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
        <title>.::Migracion Ext 3 a Ext4::.</title>
        
        <%-- Librerias EXTJS --%>
        <link rel="stylesheet" type="text/css" href="/migration/ext4/resources/css/ext-all.css" />
        <script type="text/javascript" src="/migration/ext4/ext-all-debug.js"></script>


        
        <!-- Ext 3.x compatibility -->
        <script type="text/javascript" src="/migration/compatibility/ext3-core-compat.js"></script>
        <script type="text/javascript" src="/migration/compatibility/ext3-compat.js"></script>
                   
        <%-- Widgets --%>
        <jsp:include page="/js/example.jsp"></jsp:include>
        
              
        <script type="text/javascript">     
        //Ext.Compat.showErrors = true;
                     
               Ext.onReady(function() {
               
                Ext.QuickTips.init();
                var cmp1 = new MyPanel({
                    renderTo: Ext.getBody()
                });
                cmp1.show();
                });                
        </script>
        
    </head>
    <body>
    </body>
</html>

y aca el codigo Extjs3, la clase se llama example.jsp:

Code:

<script type="text/javascript">


strDestinatario = Ext.apply(Ext.data.Store.prototype, {
    constructor: Ext.Function.createInterceptor(Ext.data.Store.prototype.constructor, function(cfg) {
        cfg = cfg || {};
        strDestinatario.superclass.constructor.call(this, Ext.apply({
            storeId: 'strDestinatario'
        }, cfg));
    })
});
//new strDestinatario();


strPrioridad = Ext.apply(Ext.data.Store.prototype, {
    constructor: Ext.Function.createInterceptor(Ext.data.Store.prototype.constructor, function(cfg) {
        cfg = cfg || {};
        strPrioridad.superclass.constructor.call(this, Ext.apply({
            storeId: 'strPrioridad'
        }, cfg));
    })
});
//new strPrioridad();


strTipoRequerimiento = Ext.apply(Ext.data.Store.prototype, {
    constructor: Ext.Function.createInterceptor(Ext.data.Store.prototype.constructor, function(cfg)  {
        cfg = cfg || {};
        strTipoRequerimiento.superclass.constructor.call(this, Ext.apply({
            storeId: 'strTipoRequerimiento'
        }, cfg));
    })
});
//new strTipoRequerimiento();


MyPanelUi = Ext.extend(Ext.Panel, {
    width: 784,
    height: 512,
    layout: 'absolute',
    initComponent: function() {
        this.items = [
            {
                xtype: 'panel',
                x: 10,
                y: 40,
                layout: 'form',
                labelWidth: 150,
                autoWidth: true,
                border: false,
                items: [
                    {
                        xtype: 'combo',
                        fieldLabel: 'Tipo Requerimiento',
                        autoWidth: true,
                        store: 'strTipoRequerimiento'
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 70,
                layout: 'form',
                labelWidth: 150,
                autoWidth: true,
                border: false,
                items: [
                    {
                        xtype: 'combo',
                        fieldLabel: 'Prioridad',
                        autoWidth: true,
                        store: 'strPrioridad'
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 100,
                layout: 'form',
                labelWidth: 150,
                autoWidth: true,
                border: false,
                items: [
                    {
                        xtype: 'combo',
                        fieldLabel: 'Enviar a',
                        autoWidth: true,
                        store: 'strDestinatario'
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 130,
                width: 380,
                layout: 'form',
                labelWidth: 150,
                border: false,
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Titulo',
                        anchor: '100%'
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 160,
                width: 460,
                layout: 'form',
                labelWidth: 150,
                border: false,
                items: [
                    {
                        xtype: 'textarea',
                        width: 300,
                        fieldLabel: 'Descripcion',
                        height: 40
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 207,
                width: 460,
                layout: 'form',
                labelWidth: 150,
                border: false,
                items: [
                    {
                        xtype: 'textarea',
                        width: 300,
                        fieldLabel: 'Objetivo',
                        height: 40
                    }
                ]
            },
            {
                xtype: 'panel',
                x: 10,
                y: 254,
                width: 460,
                layout: 'form',
                labelWidth: 150,
                border: false,
                items: [
                    {
                        xtype: 'textarea',
                        width: 300,
                        fieldLabel: 'Observaciones',
                        height: 40
                    }
                ]
            },
            {
                xtype: 'toolbar',
                items: [
                    {
                        xtype: 'button',
                        text: 'Registrar'
                    },
                    {
                        xtype: 'tbseparator'
                    },
                    {
                        xtype: 'button',
                        text: 'Adjuntar Archivo'
                    }
                ]
            }
        ];
        MyPanelUi.superclass.initComponent.call(this);
    }
});


MyPanel = Ext.extend(MyPanelUi, {
    initComponent: function() {
        MyPanel.superclass.initComponent.call(this);
    }
});


Ext.reg('mypanel', 'MyPanel');

</script>

Ahora cuando corro la aplicacion en google chrome, me aparece que el error se centra en estas lineas:

Code:

-- MyPanelUi.superclass.initComponent.call(this);

--MyPanel.superclass.initComponent.call(this);

--              Ext.onReady(function() {               
                Ext.QuickTips.init();
                var cmp1 = new MyPanel({
                    renderTo: Ext.getBody()
                });
                cmp1.show();
                });

Espero me puedan ayudar. Muchas Gracias.

**dawesi** · 25 May 2012 9:08 AM

"Hello everyoneI hope you canhelp me resolve thisproblem, I'mmigrating fromExtJsExtJs3 to4,have compiledcompatibility packages, but stilldoes not displaytheform you create, someonecan help me?Here I give youthe code."

Migration ExtJs 3 to ExtJs 4

Thread Tools

Search Thread

Display

Migration ExtJs 3 to ExtJs 4

Migration ExtJs 3 to ExtJs 4

Translation To English:

Translation To English: