14

sencha touch 2.0 は初めてです。私はhtmlファイルを持っています。この html ファイル (またはコンテンツ) をパネルにロードしようとしています。私は単に ajax 呼び出しを使用していますが、機能していません。以下はコードです。

これは、ブラウザで実行している html ファイルです。

index.html :

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="HTMLPanel.js"></script>
<script type="text/javascript" src="app.js"></script>

これはapp.jsです:

Ext.setup({
    name : 'SampleLoad',
    requires : ['HTMLPanel'],
    launch : function () {
        var HTMLPanel = new HTMLPanel({
            scroll : 'vertical',
            title : 'My HTML Panel',
            url : 'sample.html'
        });
    }
});

これはHTMLPanel.jsです:

//HTMLPanel = Ext.extend(Ext.Panel, { //gives error 
var HTMLPanel = Ext.define('HTMLPanel',{
    extend : 'Ext.Panel',
    constructor : function( config ) {
        HTMLPanel.superclass.constructor.apply(this, arguments);

        // load the html file with ajax when the item is
        // added to the parent container
        this.on(
            "activate",
            function( panel, container, index ) {
                if( this.url && (this.url.length > 0) )
                {
                    Ext.Ajax.request({
                        url : this.url,
                        method : "GET",
                        success : function( response, request ) {
                            //console.log("success -- response: "+response.responseText);
                            panel.update(response.responseText);
                        },
                        failure : function( response, request ) {
                            //console.log("failed -- response: "+response.responseText);
                        }
                    });
                }
            },
            this
        )
    },

    url : null
});

html コンテンツをパネル内に表示したいだけです。誰か助けてくれませんか？

4

2 に答える 2

31

Sencha Touch 2 では、クラスシステムが 1.x と比べて大幅に変更されました。ExtJS 4 と非常によく似ています。変更の背後にある考え方は、理解しやすく、開発を迅速化し、より動的にすることです。

いくつかの変更：

  • もう使用しないでくださいnew HTMLPanel({})。代わりに、 を使用Ext.createしますExt.create('HTMLPanel', {})。
  • Ext.extendカスタム クラスの定義には使用しないでください。代わりに、プロパティで使用Ext.defineしてください。extend
  • HTMLPanel.superclass.constrctor.apply(this, arguments)親を呼び出すためにもう使用する必要はありません。代わりに、使用できますthis.callParent(arguments)

  • オーバーライドすることはめったにありませんconstructor。これは悪い習慣です。代わりに、次のconfigブロックを使用する必要があります。

    Ext.define('HTMLPanel', {
    extend: 'Ext.Panel',

    config: {
        html: 'This is the html of this panel.'
    }
});

    configを使用して新しいクラスを定義する場合、構成はブロック内でのみ行われることに注意してくださいExt.define。を使用してクラスの新しいインスタンスを作成する場合Ext.create、new ClassNameまたは xtype を持つオブジェクトを使用する場合、構成は構成オブジェクト内にある必要はありません。

このガイドを読むと、新しいクラス システムの詳細を確認できます。1.x から 2.x への移行方法に関する優れたガイドもここにあります。

それでは、コードを機能させましょう。

index.html (何も変更する必要はありません):

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="HTMLPanel.js"></script>
<script type="text/javascript" src="app.js"></script>

app.js :

// You should use Ext.application, not Ext.setup
Ext.application({
    name: 'SampleLoad',
    requires: ['HTMLPanel'],
    launch: function () {
        var HTMLPanel = Ext.create('HTMLPanel', {
            // this is now `scrollable`, not `scroll`
            //scroll: 'vertical',
            scrollable: 'vertical',

            url: 'sample.html'
        });

        // Add the new HTMLPanel into the viewport so it is visible
        Ext.Viewport.add(HTMLPanel);
    }
});

HTMLPanel.js :

// You do not need to save a reference to HTMLPanel when you define your class
//var HTMLPanel = Ext.define('HTMLPanel', {
Ext.define('HTMLPanel', {
    extend: 'Ext.Panel',

    // We are using Ext.Ajax, so we should require it
    requires: ['Ext.Ajax'],

    config: {
        listeners: {
            activate: 'onActivate'
        },

        // Create a new configuration called `url` so we can specify the URL
        url: null
    },

    onActivate: function(me, container) {
        Ext.Ajax.request({
            // we should use the getter for our new `url` config
            url: this.getUrl(),
            method: "GET",
            success: function(response, request) {
                // We should use the setter for the HTML config for this
                me.setHtml(response.responseText);
            },
            failure: function(response, request) {
                me.setHtml("failed -- response: " + response.responseText);
            }
        });
    }
});

うまくいけば、これが役に立ちます。

于 2012-02-12T21:01:44.290 に答える
5

rdouganの答えは私のために働いた。それでもうまくいかない場合は、AJAX を使用して .js ファイルを少し異なる方法でロードしているSencha Docs の例を確認してください (.html ファイルの場合もまったく同じです)。ソースを入手するには、Sencha Touch 2 SDKをダウンロードしてexamples/nestedlistください。

于 2012-06-12T22:57:53.973 に答える