0

手始めに、私はExtJSを初めて使用します

問題を確認していただきありがとうございます。これまでのところ、同等の質問はどこにも見つかりませんでした。WebアプリケーションインターフェイスをTiles/Spring/jQueryからTiles/Spring / ExtJSインターフェイスに移行しようとしていますが、いくつかの基本を開始するのに問題があります。

手始めに、コード:

Ext.onReady(function() {

    Ext.QuickTips.init();

    var login = new Ext.FormPanel({
        title: "Please Login",
        url: 'j_spring_security_check',
        labelWidth: 80,
        frame: true,
        defaultType: 'textField',
        width: 300,
        height: 150,
        monitorValid: true,
        bodyStyle: 'padding:10px',
        items: [{
            fieldLabel: 'Username',
            name: 'j_username',
            id: 'userName',
            allowBlank: false,
            listeners: {
                afterrender: function(field) {
                    field.focus();
                }
            }
        }, {
            fieldLabel: 'Password',
            name: 'j_password',
            inputType: 'password',
            allowBlank: false
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            handler: function() {
                loginSubmit();
            }
        }, {
            text: 'Reset',
            formBind: true,
            handler: function() {
                reset();
            }
        }],
        listeners: {
            afterRender: function(thisForm, options) {
                this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                    enter: loginSubmit,
                    scope: this
                });
            }
        }
    });

    function reset() {
        login.getForm().reset();
    }

    function loginSubmit() {
        login.getForm().submit({
            method: 'POST',
            success: function(form, action) {
                window.location = 'home';
            },
            failure: function(form, action) {
                Ext.Msg.alert('Login Failed!', 'Login Failed');
                reset();
            }
        });
    }

    login.render('login');
});

そして、これはjspページのscriptタグで適切にラップされています。

このJSPがレンダリングするタイルページにextJSファイルをインポートします。

<link type="text/css" rel="stylesheet" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

そしてこの時点で、私は物事が何らかの形でレンダリングされることを期待しますが、代わりに私はこれを取得します: Firebugエラー

不思議なことに、以下の2行目と3行目にあるように、0バイトのresponseBodyが表示されることを除いて、ファイルは正常にロードされます(少なくとも、エラーは表示されません)。 Firebugの応答

私は周りを見回して、自分の能力を最大限に発揮するためにすべての簡単な修正をすでに試しました。ここの誰かが助けてくれることを願っています。時間を割いて私の問題を見てくれてありがとう。

アップデート

sencha CDNへのスクリプト参照を変更すると、このエラーを乗り越えて新しいエラーになりますが、これに固執して最初に解決したいと思います。

以下のコメントに基づく私の最善の推測は、ext-base.js(ダウンロードしたExtJSには含まれていません)が欠落しているか、ファイルの場所/Spring構成が間違っていることです。これらのエントリを春の設定に追加しました。

<mvc:resources location="/WEB-INF/extjs/*" mapping="/extjs/**" />
 ....
    <security:intercept-url pattern="/appName/extjs/**"
  access="permitAll" requires-channel="any" />

それでも私はまだ同じエラーを抱えています。WEB-INFディレクトリにextjsフォルダーがありますが、上記のmvc:resourcesで修正して、次のように参照できるようにする必要があります。

< script type="text/javascript" src="extjs/ext-all-debug.js"

それでも、「302found」エラーが発生します

4

2 に答える 2

1

ネットワークトラフィック履歴(最新のイメージ)でわかるように、extjsファイル(ext-all-debug.jsおよびext-all.css)が見つかりません。さらに興味深いのは、エラーコードがより一般的な404ではなく302(おそらくリダイレ​​クト)であるということです。

とにかく、リソースがそこにないので、それが0バイトの応答を受け取る理由です。詳細を確認するために失敗したリクエストの詳細を確認できますが、基本的には、ファイルの場所とサーバー/アプリケーションの構成を確認して、それらのファイルが見つからなかった理由を確認する必要があります。

アップデート:

この種の問題は、ほとんどの場合、認証されていないためです。次に、GETリクエストを実行すると、サーバーは認証されていないことを確認し、ログインページにリダイレクトします(302エラーコード)。

CDNサーバーで認証される必要がないため、CDNの使用は機能します。

ログインページは、認証されていない場合でも、必要なすべてのリソースにアクセスできる必要があります。

悲しいことに、私はあなたが使用している技術を知りませんが、それはあなたが苦しんでいる問題です。

于 2012-12-18T23:28:15.687 に答える
0

これを見逃していませんか...?

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

パスが間違っている可能性があります、あなたはそれを修正する必要があるかもしれません

アップデート

ext-base.jsは必要ありませんでした。実際、どこにも見つかりません。コードをチェックして、これらすべてが含まれているかどうかを確認してください

index.phpの先頭を投稿します

<head>

    <META http-equiv="Content-Type" content="text/html; charset=utf-8">

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <META HTTP-EQUIV="Expires" CONTENT="-1">

    <title>Page Title</title>

    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="src/views/css/data-view.css" />

    <script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="src/app.js"></script>
</head>
于 2012-12-18T23:33:05.303 に答える