Todos los ejemplos que he encontrado hasta ahora a explicar cómo hacer ExtJS (4.2) aplicación MVC dentro de la «ventanilla», que en otras palabras significa completo de la pantalla del navegador, y ocupando todo el CUERPO HTML.

Me gustaría que hacen de la aplicación dentro de la página HTML existente dentro de la denominada DIV, para que yo pueda tener el código HTML de diseño alrededor de la aplicación.

 <div id="appdiv"><!-- application runs here --></div>

He visto algunos sitios con ExtJS 4 ejemplos que utilizan truco para representar ExtJS aplicación dentro de la página mediante el uso de IFRAME.

Es posible evitar IFRAME? Y, si es así, ¿cómo esqueleto de ExtJS 4.2 aplicación se si será emitida dentro de un div.

Notas: En ExtJS 3 he encontrado la solución por la creación de un panel como contenedor principal que hace que dentro de la denominada div. Sin embargo, la versión 4.2 (y posiblemente anterior 4.x) sugiere la aplicación de MVC enfoque que parecen muy superior.

—- Ediciones

Me he dado cuenta de que tengo que poner puntos de partida para esta pregunta.

  1. Fuente de este ejemplo es generado por ExtJS del CMD comando que genera «aplicación» marco de esqueleto.
  2. Esqueleto de la aplicación se compone de muchos archivos, incluyendo el motor de referencia, y otras referencias, por lo que no sería capaz de incluir aquí todas las fuentes en «aplicación» dir/carpeta. El esqueleto de la aplicación puede realizarse mediante cmd en la moda: sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp Esto genera archivos y carpetas y copias todos los archivos necesarios en el lugar.
  3. «Usuario» área de actividad es en la «app» dir. Aplicación dir ha subdirectorios para las vistas, controladores, modelos y más cosas.
  4. Como en muchos otros frameworks que se espera mantener la estructura de carpetas de manera que el marco puede encontrar los archivos correspondientes y seleccionarlos.
  5. lista de archivos:

index.html (en la raíz de la aplicación generada)

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>ExtGenApp</title>
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app/app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body>
        <h1>HTML Before</h1>
        <div id="appBox"></div>
        <h1>HTML After</h1>
    </body>
    </html>

app/app.js

    /*
        This file is generated and updated by Sencha Cmd. You can edit this file as
        needed for your application, but these edits will have to be merged by
        Sencha Cmd when it performs code generation tasks such as generating new
        models, controllers or views and when running "sencha app upgrade".

        Ideally changes to this file would be limited and most work would be done
        in other places (such as Controllers). If Sencha Cmd cannot merge your
        changes and its generated code, it will produce a "merge conflict" that you
        will need to resolve manually.
    */

    //DO NOT DELETE - this directive is required for Sencha Cmd packages to work.
    //@require @packageOverrides



    Ext.application({
        name: 'ExtGenApp',

        views: [
            'Main',
            'appBoxView'
        ],

        controllers: [
            'Main'
        ],

        launch: function() {
            new Ext.view.appBoxView({
                renderTo: 'appBox'
            });;  //generates error      
        }
    });

nota: en principio no hay ningún lanzamiento de la función pero no es auto generar viewport (uno consigue que por defecto generador)

app/controller/Main.js

    Ext.define('ExtGenApp.controller.Main', {
        extend: 'Ext.app.Controller'
    });

app/view/appBoxView.js

    Ext.define('ExtGenApp.view.appBoxView', {
        extend: 'Ext.panel.Panel',

        requires:[
            'Ext.tab.Panel',
            'Ext.layout.container.Border'
        ],

        layout: {
            type: 'border'
        },

        items: [{
            region: 'west',
            xtype: 'panel',
            title: 'west',
            width: 150
        },{
            region: 'center',
            xtype: 'tabpanel',
            items:[{
                title: 'Center Tab 1'
            }]
        }]
    });

este será el diseño inicial en la pantalla (AFAIK)

y por último:

app/view/Main.js

    Ext.define("ExtGenApp.view.Main", {
        extend: 'Ext.Component',
        html: 'Hello, World!!'
    });

que, según tengo entendido, como ser el «contenido».

como es, se genera un error de no fundar «Ext.vista.appBoxView» y cómo me parece a mí, marco no inicializar la aplicación.

  • Re: Meredith desafortunadamente, debido a la combinación de dudosa ext licencias (por producto comercial) y por el mismo tiempo estos primeros obstáculos que el proyecto para el que esta investigación se ha intentado arrancó por otro camino, así que, honestamente yo no tengo mucho de un tiempo en el que, mientras tanto, evaluar las respuestas. I plan para evaluar y cerrar esta cuestión de si esta es lo suficientemente clara. EN el mismo tiempo que me gustaría preguntar también por la orientación de los administradores como a esta pregunta parece ser generados obstinado de respuestas, y puede revelar más información interesante acerca de EXT.js MVC framework tal vez permanezca abierta por un tiempo más???
  • También en el mientras tanto, empecé a creer que los autores de Ext.Js no se imaginan el uso de este marco de referencia de la moda que he descrito. Hacer que la aplicación se ejecute en tamaño completo de navegador que está fuera de los proyectos de la idea inicial de ext.js integración en el sistema más grande.
  • ??? No está seguro de lo que dije en mi comentario (si es que he hecho el año pasado?) pero durante mucho tiempo he mudado de uso de ExtJS. Terminé usando como una página completa del marco de la aplicación en lugar de sólo una cuadrícula de componente, la forma en que los diseñadores de la intención de ser utilizado. Algunos grupos plugin había un error si la red no se usa de esa manera.
InformationsquelleAutor ljgww | 2013-05-22

4 Comentarios

  1. 3

    Un viewport es sólo una especializadas Ext.container.Container que auto tamaños a la del cuerpo del documento.

    Como tal, usted puede crear fácilmente su propio en la modalidad de lanzamiento:

    launch: function(){
        new MyContainer({
            renderTo: 'myDiv'
        });
    }
    • sí, eso es cómo esto se puede hacer en ExtJS 3. Pero ExtJS4 aplicación MVC consiste de puntos de vista y auto-representación de la ventanilla. Esta probado y me dice que MyContainer no está definido, ¿cómo puedo hacer referencia a una «vista»?
    • Auto de la representación de la ventanilla, básicamente, hace exactamente lo que tengo encima. Declarar su propio punto de vista MyApp.view.Container en la misma forma que había de declarar un área de visualización. Exigen en sus puntos de vista, a continuación, crear como he sugerido anteriormente.
    • todavía no podía entender cómo crear instancias de contenedor principal, pero desde puntos de vista se definen en otra parte me parece que voy a usar Ext.Método de crear en el lanzamiento, hay algunos que se debate aquí, sencha.com/forum/…, pero todavía no receta.
    • La única diferencia entre crear/nuevo es que cree búsqueda pendientes de las dependencias, las nuevas no. No estoy realmente seguro de cómo explicar más lejos, en el lanzamiento de crear una instancia del componente contenedor.
    • Se compila un conjunto de fuentes en un intento de respuesta, viendo que no hay otra manera de explicar donde el problema puede ser. Falla en algún lugar entre «marco» y las definiciones.
  2. 1

    En algunas de estas respuestas, algunos sugieren el uso de un Ext.Panel con un renderTo. Usted no debería estar usando un Ext.Panel si no vas a utilizar para otra cosa que un recipiente, si vas a ir a esta ruta. Usted debe estar utilizando Ext.contenedor.Contenedor en su lugar.

    Mediante Ext.El Panel de la adición de un montón de cosas innecesarias como la barra de título y como a su componente. Cada uno de estos aumenta el lugar de los titulares de allí, incluso si usted no los está usando.

  3. 1

    Me gustó Evan Trimboli conciso de enfoque, pero yo no podía conseguir que funcione bien (también me dijo que MyContainer no está definido). Sin embargo, este enfoque funcionó…

    launch: function () {    
        Ext.create('widget.MyContainer', {
            renderTo: 'MyDiv'
        });
    }

    …donde 'widget.MyContainer' es el alias creado dentro de la propia vista, y siempre hice también esta en la parte de arriba:

    Ext.define('MyApp.Application', {
        extend: 'Ext.app.Application',
    
        name: 'MyApp',
    
        views: [
            'MyApp.view.MyContainer'
        ],
    ...
    • MyContainer era un nombre que me he inventado, no hay en clase llamada que.
    • A la derecha, había creado la clase (como lo hice yo para mi ejemplo de arriba). Pero incluso cuando hacerlo y que hace referencia a él en la Aplicación, no podía parecen hacer new MyContainer sin sin ella diciendo: «no definido». Hay algo que me perdí?
    • Su clase es MyApp.view.MyContainer.
    • Interesante. Yo estaba asumiendo que iba a ver/usar el alias. Así que con este enfoque, veo que no requiere de una inclusión en «vistas» de arriba. Línea de fondo, hay varias maneras de crear una instancia. Pero hay una que se sugieren como la mejor práctica?
  4. 0

    ¿Has probado con Ext.el panel.Panel o Ext.de la ventana.La ventana como un contenedor?

    <div id="appBox">
    <script type="text/javascript">  
    
    Ext.require('Ext.panel.Panel');
            Ext.onReady(function(){
    
                Ext.create('Ext.panel.Panel', {
                    renderTo: Ext.getBody(),
                    width: 400,
                    height: 300,
                    title: 'Container Panel',
                    items: [
                        {
                            xtype: 'panel',
                            title: 'Child Panel 1',
                            height: 100,
                            width: '75%'
                        },
                        {
                            xtype: 'panel',
                            title: 'Child Panel 2',
                            height: 100,
                            width: '75%'
                        }
                    ]
                });
    
    
            })
    
        </script>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here