JavaScriptでは、コンパイルを実行する必要はありません。これにより、JavaScriptによって構築されたアプリケーションが非常に柔軟になります。必要に応じてJavaScriptスクリプトをサーバーから動的にロードして、UIを作成および制御してユーザーと対話できます。以下は、サーバーからJSスクリプトを動的にロードして形式を動的に作成する方法を説明するためのext JSの組み合わせです。
1プロジェクト構造：
プロジェクト構造は次のとおりです。GetJSUI一般ハンドラーは、データベーステーブルからUI構成を取得し、クライアントに返すために使用されます。 HTMLファイルとJSライブラリは、コンテンツフォルダーで使用されます。
2データベーステーブル構造
次のSQLを使用して、JavaScriptContentフィールドが特定のJSスクリプトを保存するMSSQLでテーブルを作成できます。
テーブルを作成[dbo]。 [主要な]
作成後、データを初期化できます。
作成後、データを初期化できます。
4 GetJSUIプログラミング
Systemを使用; System.Collections.Generic; System.linq; System.Web;を使用してCmclouddbhelper; namespace extjs6.servicesを使用して使用する{/// <summary> ///著者：Jackwangcumt // ""; context.response.contenttype = "text/plain"; //context.response.contenttype = "text/javascript"; cmcdataaccess da = new cmcdataaccess（）; string sqlforjs = "select * fromext_dynamic_form where id = '006'"; system.data.datatable dt = da.getDatabable（sqlforjs）; if（dt！= null）{if（dt.rows.count == 1）{js = dt.rows [0] ["javascriptcontent"]。toString（）; }} // utf-8 context.response.contentencoding = system.text.encoding.utf8; context.response.write（js）; } public bool isReusable {get {return false; }}}}5メインインターフェイスHTML
<html> <head> <title>サーバーjavascriptからフォームを動的に生成</title> <！ - ライブラリファイル - > <メタhttp-equiv = "x-ua-compatible" content = "ie = edge" charset = "utf-8"> <meta name = "viewport" content = "width = device-width = neagince-scale <script type = "text/javascript" src = "ext6/ext-all-debug.js"> </script> <link rel = "styleSheet" type = "href =" href = "ext6/classic/thema-triton/resources/resources/resources/resources/theme-triton-all-debug.css" src = "ext6/classion/theme-triton/theme-triton-debug.js"> </script> <script type = "text/javascript"> // load *.jsファイルfrom server function loadscript（url、callback）{var script = document.createelment（ "script"）。 if（script.readystate）{// ie script.onreadystatechange = function（）{if（script.readyState == "loaded" || script.readystate == "complete"）{script.oneadystatechange = null;折り返し電話（）; }}; } else {// others script.onload = function（）{callback（）; }; } script.src = url; document.getElementsByTagname（ "head"）[0] .appendChild（script）; } //サーバー関数からJSテキストをロードloadscriptsrc（js、callback）{var script = document.createelement（ "script"）script.type = "text/javascript"; //script.async = true; if（script.readystate）{// ie script.onreadystatechange = function（）{if（script.readyState == "loaded" || script.readystate == "complete"）{script.oneadystatechange = null;折り返し電話（）; }}; } else {// others script.onload = function（）{callback（）; }; } script.text = js; console.log（script）; document.getElementsByTagname（ "head"）[0] .appendChild（script）; // callback（）; } // ext JS 6 ext.onready（function（）{//https://www.sencha.com/forum/showthread.php?268193-how-to-content-content--tabpanel var pmain = ext.widget（ 'panel'、{renderto： 'behide：800、wid：800、wid： [{西 '、地域：「西」、幅：200、崩壊：true}、{xtype：' tabpanel '、region：' center '、items：[{title：' first tab '、' tab01 '、}、{title：' second tab '、layout：' fit '、loader：' url： 'form：' film： 'fied' 'fied' 'fied' 'fied' 'fied'、aigoload }}]}]}。 loadscriptsrc（respons.responsetext、function（）{ext.msg.alert（ "loaded js"、 "loaded js from server"）; ext.create（ "gpview"）; //loadscript( "dynamicloadjs2.js"、function（）{// ext.msg.alert（ "loaded"）; // var gp = ext.create（ "gpview"）; //console.log( //gp）; // // //gp.body.renderto(renderto(render ext.componentQuery（ '＃tab01'）[0] .add（// html： '// //}）; </script> </head> <body> </body> </html>6ラン
このようにして、メインフレームワークを作成し、メニューやアクセス許可などの一般的なシステムを構築できます。データベースにメニューとUIを構成することにより、アプリケーションを動的に拡張できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。