首頁 > 開發者 > JavaScript
Ext JS動態載入JavaScript建立表單的方法，extjavascript
JavaScript不需要編譯即可運行，這讓JavaScript構建的應用程式可以變得很靈活。我們可以根據需要動態從伺服器載入JavaScript指令碼來建立和控制UI來與使用者互動。下面結合Ext JS來說明如何從伺服器上動態載入JS指令碼來動態建立表單。
1 項目結構：
項目結構如下：其中GetJSUI一般處理常式用來從資料庫表中抓取UI配置，並返回到用戶端；Contents檔案夾下用HTML檔案和JS庫等。
2 資料庫表結構
可以用下面的SQL在MSSQL中建立表，其中JavaScriptContent欄位儲存具體的JS指令碼。
CREATE TABLE [dbo].[Ext_Dynamic_Form]( [ID] [nvarchar](50) NOT NULL, [UniName] [nvarchar](50) NULL, [JavaScriptContent] [nvarchar](4000) NULL, [Memo] [nvarchar](200) NULL, CONSTRAINT [PK_Ext_Dynamic_Form] PRIMARY KEY CLUSTERED ( [ID] ASC)) ON [PRIMARY]
建立好後，可以初始化資料：
建立好後，可以初始化資料：
4 GetJSUI 編程
using System;using System.Collections.Generic;using System.Linq;using System.Web;using CMCloudDBHelper;namespace extjs6.Services{ /// <summary> /// author:jackwangcumt /// </summary> public class GetJSUI : IHttpHandler { public void ProcessRequest(HttpContext context) { string js = ""; context.Response.ContentType = "text/plain"; //context.Response.ContentType = "text/javascript"; CMCDataAccess da = new CMCDataAccess(); string SQLForJS = "select * FROM Ext_Dynamic_Form where ID='006'"; System.Data.DataTable dt= da.GetDataTable(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>Dynamically generate forms from server javascript</title> <!-- Library Files --> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script type="text/javascript" src="ext6/ext-all-debug.js"></script> <link rel="stylesheet" type="text/css" href="ext6/classic/theme-triton/resources/theme-triton-all-debug.css"> <script type="text/javascript" src="ext6/classic/theme-triton/theme-triton-debug.js"></script> <script type="text/javascript"> //load *.js file from server function loadScript(url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } //load js text from server function 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.onreadystatechange = null; callback(); } }; } 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-load-content-dynamically-for-tabpanel var pmain = Ext.widget('panel', { renderTo: document.body, height: 800, width: 800, layout: 'border', items: [{ title: 'West', region: 'west', width: 200, collapsible: true }, { xtype: 'tabpanel', region: 'center', items: [{ title: 'First Tab', itemId: 'tab01', }, { title: 'Second Tab', layout: 'fit', loader: { url: 'Form.json', autoLoad: true, renderer: 'component' } }] }] }); //ajax config var reqConfig = { url: '../Services/GetJSUI.ashx', method: 'get', callback: function (options, success, response) { // var msg = ['success:', success, '\n', 'data:', response.responseText]; // alert(msg.join('')); loadScriptSrc(response.responseText, function() { Ext.Msg.alert("loaded js","從伺服器載入JS完成"); var gp = Ext.create("gpView"); Ext.ComponentQuery.query('#tab01')[0].add(gp); }); } }; Ext.Ajax.request(reqConfig); //loadScript("dynamicLoadJS2.js", function() { // Ext.Msg.alert("loaded"); // var gp = Ext.create("gpView"); // //console.log(gp); // //gp.body.renderTo(pmain); // // Ext.ComponentQuery.query('#tab01')[0].add({ // // html: 'Oh, Hello.' // // }); // Ext.ComponentQuery.query('#tab01')[0].add(gp); //}); }); </script></head><body></body></html>
6 運行
這樣我們可以做一個主架構，然後構建菜單和許可權等通用體系，通過在資料庫中配置菜單及UI，可以動態擴充應用。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
