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をもっとサポートすることを願っています。