JavaScript не требует компиляции для запуска, что делает приложения, созданные JavaScript, очень гибкими. Мы можем динамически загружать сценарии JavaScript с сервера по мере необходимости для создания и управления пользовательским интерфейсом для взаимодействия с пользователями. Ниже приводится комбинация EXT JS, чтобы проиллюстрировать, как динамически загружать сценарии JS с сервера, чтобы динамически создать форму.
1 Структура проекта:
Структура проекта заключается в следующем: генеральный обработчик GetJsui используется для получения конфигурации пользовательского интерфейса из таблицы баз данных и возврата его клиенту; Файлы HTML и библиотеки JS используются в папке содержимого.
2 Структура таблицы баз данных
Вы можете использовать следующий SQL для создания таблицы в MSSQL, где поле JavaScriptContent хранит конкретные сценарии JS.
Создать таблицу [dbo]. [Ext_dynamic_form] ([id] [nvarchar] (50) не null, [un -nvarchar] [nvarchar] (50) Null, [javascriptContent] [nvarchar] (4000) Null, [memo] [nvarCharChare] (null, null, constraint [pk_ext_dynmic_form_form] (pk_ext_dext_mynamic_forms] [pk_ext_dext_formed] [pk_ext_mynmic_form) (200) (nullister) (nvarcharcher] (200). [НАЧАЛЬНЫЙ]
После создания вы можете инициализировать данные:
После создания вы можете инициализировать данные:
4 GetJsui программирование
Использование System; с использованием system.collections.generic; с использованием system.linq; с использованием system.web; с использованием cmclouddbhelper; kinespace extjs6.services {/// <summary> /// Автор: jackwangcumt /// </summary> public class getjsui: ihttphandler {public void processRequest (httpcontectectlectstectectlectstectrots) context.response.contenttype = "text/plain"; //context.response.contenttype = "text/javascript"; CMCDATAACCESS DA = новый CMCDATAACCESS (); string sqlforjs = "select * from ext_dynamic_form, где 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 = javascript src = "ext6/classic/theme-triton/theme-triton-debug.js"> </script> <script type = "text/javascript"> // load *.js file из функции сервера loadscript (url, callback) {var script = document.createelement ("script") script.type = "text/javascript"; if (script.readystate) {// ie script.onreadystatechange = function () {if (script.readystate == "загружен" перезвонить(); }}; } else {// other 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 == "загружен" перезвонить(); }}; } else {// other script.onload = function () {callback (); }; } script.text = js; console.log (script); document.getElementsbytagname ("head") [0] .appendchild (script); // невозможно обратно (); } // 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 ('panely-letryout: renderto: document. body, hight: 800, without: 800, without: 800, without: 800 without: 800, widthout: 800 without: 800. [{title: «Запад», Регион: «Запад», ширина: 200, коллапс: true}, {xtype: 'tabpanel', region: 'center', элементы: [{title: 'first tab', itemid: 'tab01',}, {title: 'second tabe', макет: 'fit', urler: {url: 'form.json', autoLau }}]}]}); loadscriptsrc (response.responsetext, function () {ext.msg.alert ("загруженная js", "загруженная js из сервера"); var gp = ext.create ("gpview"); //loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert (" загружен "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderto(pmain); Ext.componitequery.query ('#tab01') [0]. </script> </head> <body> </body> </html>6 бег
Таким образом, мы можем сделать основную структуру, а затем создать общую систему, такую как меню и разрешения. Настройка меню и пользовательского интерфейса в базе данных, мы можем динамически расширить приложение.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.