手始めに、私は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>
そしてこの時点で、私は物事が何らかの形でレンダリングされることを期待しますが、代わりに私はこれを取得します:
不思議なことに、以下の2行目と3行目にあるように、0バイトのresponseBodyが表示されることを除いて、ファイルは正常にロードされます(少なくとも、エラーは表示されません)。
私は周りを見回して、自分の能力を最大限に発揮するためにすべての簡単な修正をすでに試しました。ここの誰かが助けてくれることを願っています。時間を割いて私の問題を見てくれてありがとう。
アップデート
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」エラーが発生します