5

ExtJS (MVC とビューポートを含む) を使用して Web アプリケーションを開発する場合、通常、ナビゲートする可能性はありません。ページ内のすべてのアイテム (ボタン、テキストフィールド、テキストエリアなど) は、ビューのコントローラーの特定のメソッドにバインドされます。 . そのため、アプリケーションを「移動」しても、元の URL は常に同じであり、変更されません。

ここで、次のボタンで満たされたヘッダー メニュー バーを持つアプリケーションを例に取ります。

Home | Setup | Archive

また、アプリケーションの元の URL は次のようになります。

http://www.mydomain.com/webapp

この時点で、誰かが [ホーム] または [セットアップ] または [アーカイブ] メニューをクリックすると、特定のビューが中央の領域に表示され、URL が変更されます。

http://www.mydomain.com/webapp/[home|setup|archive]

したがって、[設定] メニューをクリックすると、次の URL がアドレス バーに表示されます。

http://www.mydomain.com/webapp/setup

さらに、別の URL から同じ URL をアドレス バーに入力すると、同じページが表示されるはずです。

しかし、現在、私の webapp はまだ ' http://www.mydomain.com/webapp 'に残っており、要求されたビューを表示しています。(たとえば、MyApp.view.Setup)。

それがポイントです: URL ナビゲーションを使用して (ExtJS、MVC、Viewport を使用して) webapp を開発するにはどうすればよいでしょうか? javascript/html コードを他の PHP/Ruby/Python/$RANDOM_SERVER_LANGUAGE にネストせずに行うことは可能ですか? (クライアントをサーバー側で分割したい)

これの実装はすでに存在します: ExtJS API Documentationです。私が正しければ、要求されたページを提供するサーバー側アプリケーションや .htaccess はありません。実際、各クラスの HTML ファイルを含むメイン ディレクトリに「source」というフォルダがあります。彼らはどのようにそれをしますか？

前もって感謝します。ウィルク

4

3 に答える 3

3

わかりました、私は自分で解決策を見つけました：P

さて、この種のことは次の方法で行うことができます：

HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>Stackoverflow</title>
    <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../extjs-4.1.0/ext-all.js"> </script>
    <script type="text/javascript" src="sof.js"> </script>
</head>
<body>
    <a href="#!photos.html">Photos</a>
    <a href="#!info.html">Info</a>
    <a href="#!aboutme.html">About Me</a>

    <div id="results"></div>
</body>

ExtJSフレームワーク（sof.js）で行われるJavascript部分

// Loads each HTML part with an AJAX request
function loadAnchor (url) {
    Ext.Ajax.request ({
        url: url ,
        success: function (res) {
            // Edits results div with the new HTML part
            var r = Ext.get ('results');
            r.dom.innerHTML = res.responseText;
        }
    });
}


Ext.onReady (function () {
    var anchors = document.getElementsByTagName ('a');

    Ext.each (anchors, function (a) {
        a = Ext.get (a);
        // Attaches to each anchor the following function on click event
        a.on ('click', function (ev, anchor) {
            // Splits the hash, keeping the HTML requested
            var url = anchor.getAttribute('href').split('#!')[1];
            loadAnchor (url);
        });
    });

    // This is done without clicking an anchor, but by inserting directly the full URI
    // E.g.: http://www.mydomain.com/webapp/index.html#!info.html instead of clicking the anchor Info
    var url = document.location.hash.split('#!')[1];
    loadAnchor (url);
});

ご覧のとおり、各アンカーは、AJAXリクエストによってリクエストされたリソースをロードするjavascript関数にバインドされています。次に、特定のコンテナー（たとえば、div）が応答（HTMLコードまたはJSON、XMLなど）で変更されます。

ただし、これはApacheのようなサーバーWebで実行する必要がありますが、サーバーアプリケーションは使用しません。実際、各リソースは純粋なHTMLファイルにすることができ、それらのファイルを提供するためにサーバーアプリは必要ありません。

詳細については、以下を参照してください。

  1. アンカーベースのURLナビゲーション
  2. AJAXアプリケーションをクロール可能にする
于 2012-05-11T11:14:14.003 に答える
2

ExtJs には、このユースケースを処理するクラスが組み込まれています: Ext.util.History.

この例を見て、それがどのように機能するかを確認してください。@Wilk が共有したリンクは#!、 hash だけでなくセパレーターとして使用する方が良い理由を説明してい#ます。

于 2014-03-20T09:50:49.877 に答える
0

通常、MVC フレームワークの「url ナビゲーション」は「ルート」を介して実装されます。

sencha マーケットで以下のパッケージをチェックアウト: https://market.sencha.com/extensions/ext-ux-router

技術的には、 Ext.util.Historyを使用して URL アンカーを解析できます(@Lorenz Meyer がここで指摘したように):

    Ext.History.on('change', function(token) {
      // parse token and act
    });

以下も参照してください。

于 2014-05-30T02:56:28.713 に答える