[ExtJS5学習ノート]セクション25 window.open()関数を使用してExtJS5ログインページを実装するjump_html/css

[ExtJS5学習ノート]セクション25 window.open()関数を使用してExtJS5ログインページを実装するjump_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:55:39

オリジナル

1408 人が閲覧しました

この記事のアドレス: http://blog.csdn.net/sushengmian/article/details/40427543

mvvm 経由でのログインのブログ: http://blog.csdn.net/sushengmian/article/details /38815923

この記事の著者: sushengmyan

-------------------------------------- ------------ -------------------------------------- ------------ -------------------------------------- --

以前記事を書きましたが、Extjs5MVVM モードのシステムログイン例この記事を書いた後、ログイン後にクリックするたびにログインフォームがポップアップするという質問をいただきました。ログインフォームインターフェースがなくなるのはそのためです、今日の記事は。

方法 1: 公式 Web サイト---ログインエクスペリエンスの例: http://docs.sencha.com/extjs/5.0/tutorials/login_app.html ログインロゴを追加し、ログインしているかどうかに応じて異なるインターフェイスを表示します

方法 2: window.open を使用して Web ページにジャンプします。

ステップ 1: extjs5 http://download.csdn.net/detail/sushengmian/7701943 をダウンロードします

ステップ 2: 次の内容でindex.html と app.js を作成します:

app.js

Ext.application({    name   : 'EnterSellSaves',    launch : function() {       Ext.create('Ext.Panel', {            renderTo     : Ext.getBody(),            width        : 200,            height       : 150,            bodyPadding  : 5,            title        : 'Hello World',            html         : 'Hello <b>World</b>...'        });    }});

ログイン後にコピー

index 。 html

<!DOCTYPE html><html>    <head>        <title>欢迎来到 Ext JS!</title>       <link rel="stylesheet" type="text/css" href="ext5/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">       <script type="text/javascript" src="ext5/build/ext-all.js"></script>        <script type="text/javascript" src="ext5/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>       <script type ="text/javascript" src="app.js"></script>    </head>    <body></body></html>

ログイン後にコピー

在登陆界面，登陆按钮增加一関数

onclick="login()"

関数实现如下：

<script type="text/javascript">  function login(){    window.opener = null;    window.open('','_self');	window.close();	window.open('index.html','11','location=0,resizable=no,fullscreen=true,titlebar=no,status=no,toolbar=no,menubar=no,left=0,top=0');  }</script>

ログイン後にコピー

这样就能打开到index, html

論理的判断の場合は、jspまたはASPに変更できます。

この方法では、sencha cmd を使用してアプリケーションフレームワークを生成することも、手動で js ファイルを自分で導入することもできます。いい感じ。

最終効果---ログインページ

ログインジャンプ後

ページジャンプ後、URLも完成します。