2012-03-25 18 views
0

Ich versuche, eine externe HTML-Datei in Touch 2 zu importieren und Fehler zu finden. Meine Ansicht Code ist wie folgt:Importieren von HTML-Dateien in Sencha Touch 2

Ext.define("GS.view.Demo", { 
    extend: 'Ext.container.Container', 
    xtype: 'container', 

    requires: [ 
    'Ext.Component', 
    'Ext.ItemCollection', 
    'Ext.Mask', 
    'Ext.behavior.Scrollable', 
    'Ext.layout.Layout', 
    ], 

    config: { 
    title: 'Demo', 
    iconCls: 'star', 


    items: [{ 
       flex: 1, 
       margins: '0 2 0 0', 
       title: 'Load raw html', 
       styleHtmlContent: true, 
       bodyPadding: 5, 
       loader: { 
        autoLoad: true, 
        url: 'SHdemo.html' 
       } 
      }] 

     } 
    }); 

und apps.js:

//<debug> 
Ext.Loader.setPath({ 
'Ext': 'sdk/src' 
}); 
//</debug> 

Ext.application({ 
    controllers: ["Main"], 

name: 'GS', 

requires: [ 
    'Ext.MessageBox' 
], 

views: ['Main', 'Home', 'Contact', 'Blog', 'Demo'], 

icon: { 
    57: 'resources/icons/Icon.png', 
    72: 'resources/icons/Icon~ipad.png', 
    114: 'resources/icons/[email protected]', 
    144: 'resources/icons/[email protected]' 
}, 

phoneStartupScreen: 'resources/loading/Homescreen.jpg', 
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg', 

launch: function() { 
    // Destroy the #appLoadingIndicator element 
    Ext.fly('appLoadingIndicator').destroy(); 

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('GS.view.Main')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version.  Reload now?", 
     function() { 
      window.location.reload(); 
     } 
    ); 
    } 
}); 

dieser Code wirft „Die folgenden Klassen werden nicht deklariert, auch wenn ihre Dateien geladen wurden:‚Ext.container.Container '"und wenn ich' Ext.container.Container 'durch' Ext.Container 'in meiner Ansicht ersetze, bekomme ich" Fehler: [Ext.createByAlias] Kann eine Instanz von nicht erkanntem alias: widget.demo nicht erstellen ". Was ist das richtige Verfahren zum Importieren von externen HTML-Dateien?

Antwort

0

Es gibt keine Notwendigkeit für xtype: 'container'. Sie sollten einen Alias ​​zu Ihrem Container hinzufügen wie

extend: 'Ext.Container', 
alias:'widget.demo' 

Und um das Ansichtsfenster Hinzufügen ähnliche

Ext.Viewport.add({xtype:'demo'}); 
+0

Danke für die Hilfe, flockig aussehen könnte. Der Aliasname negiert den Widget-Fehler, aber ich bin mir nicht sicher, wo der Viewport-Code deklariert werden soll. Daher wird die externe Datei nicht geladen. Ich habe gerade einen leeren Container auf meinem Demo-Bildschirm. – kjarsenal

+0

Sie können das xtype: 'Demo' zum Ansichtsfenster hinzufügen und dann mit exampleviewport.setActiveItem() aufrufen. Auch container hat keine title config und Ränder sollten margin sein, bodyPadding sollte nur padding sein. Anstelle von loader sollten Sie etwas wie initialisieren innerhalb eines Listeners hinzufügen. Oberhalb von flex in Ihrer Items-Konfiguration fügen Sie xtype: 'container' hinzu und ändern Sie den Titel in html. – fuzzyLikeSheep

+1

Das große Problem hier ist der xtype: 'Container', den Sie haben. Der 'container' von xtype wird bereits von Ext.Container verwendet, daher sollten Sie Ihrer Klasse einen eindeutigen xtyp geben. Vergangenheit wie fuzzyLikeSheep erwähnt, haben Sie viele Konfigurationen, die in dieser Situation keine gültigen Konfigurationen sind. Ein Ajax-Aufruf hilft Ihnen anstelle der Loader-Konfiguration –