初版哦

1. LKWebTemplate5E6
& ExtJs 6 開發方式
Author:Canred.chen@gmail.com

2. ● My Blogs for ExtJs :
http://extjscanred.blogspot.tw/
● 認證：MCDBA、MCSD、MCSA、
MCST、SCJP、TCSE
● 語言：C#.Net , Java , PHP
Android , Nodejs
Phyton , Ruby , Javascript
JQuery , ExtJs , Echarts ,
Sencha Touch , Lotus Script
● 資料庫：Oracle , MSSQL, PostgreSQL
MYSQL , MongoDB , Hadoop
會紅簡介

3. 在漫長的代碼發開過程中，我一直在尋找一種可以達到快速開發
的方式，一個有規範的發展行為。想想之前我們要學會一個網頁應
用程式時，我要同時具備能力HTML4（5） , CSS , Javascript , 後
臺能力（C# , Java , Php） 等能力以及美工，並且在為了更好的互
動又出現各種Javascript Library （Pure ，Bootstarp ，kendo UI，Semantic
UI ...etc）
眾所階知的JQuery是最火紅的。但我們為什麼選擇Sencha ExtJs
呢?
起源：

4. ● 很豐富的實用組件
● 不再為CSS苦腦
● 一致的開發方式、一致的操作行為
● 再見了腦人的Url位置（Ext.Direct)
● 強大的底層零組件可再置開發
● 較容易轉成Sencha Touch的Web App還可以換成原來App.
● 完整的文檔
● 強大的Re Use（今天Demo的重點）
Why choose ExtJs

5. ExtJs提供非常多元的元件使用。
LKWebTemplate透過ExtJs的功能更進一步
的達到快速開發應用程式的能力，你有想過
10分鐘內可以快速的完成一個網頁功能嗎?
如果你希望具有這樣的能力，請後斷續看下
去啦。

6. 熟悉Chrome 開發者工具
LKWebTemplate(專為ExtJs開發人員製作
的開發範本)
Sublime Text & Html-Css-Js pretty plug-in
Sublime 程式範本
好的ExtJs 開發環境---讓您在開發時事半功倍

7. http://examples.sencha.com/extjs/
ExtJs 6 Demo .

8. Agenda
1.環境/設定
2.建立Web專案By LKWebTemplate
3.根目錄 / 架構說明
4.Your First Web Site using LKWebTemplate
5.建立您的 Design & Model (設計模形)
6.使用 sublime 建立查詢頁面/維護功能
7.新功能說明
8.Q&A

9. 環境/設定
1.Download LKWebTemplate.zip
2.Download Sublime Developer Tool (Option)
3.Download Sublime Sinppet (Option)

10. LKWebTemplate 5E6 For C#.net
LKWebTemplate 5E6 支援VS2008~2015
版。仍需要其他版本可自行昇級然後再製
成範本專案。
Framework 4.5.1

11. 建立網站專案

12. 根目錄說明
refDll:
為此專案的所有參考使用的dll動態鏈結檔
refDll/GenCode/Gendcode.exe:
為程式產生器的輔助工具，用途為將
Design的操作模式轉成執行程式碼(Model)
lib:
專案的核心程式將存放於此。
如資料庫操作/系統參數配置設計/擴展功能

13. Configs:
系統參數共5個，分別為
DataBase、SMTP、UserInfo、Paramter、DirectAuth
direct???:
Ext.Direct所使用到的服務清單。

14. js:
所有第三方來源的原JS 和
系統需求的JS設定檔案。
pageJs:
系統自行開發的JS元件。
admin ： 所有管理後台的主程式區

15. lib/Controller目錄說明
Design ：
資料表設計圖，這是程式產生器用來產
生程式的依據圖。此目錄檔案僅在程式
建立初期時使用，而以可在專案中移除
Model ：
為程式產生器的Output結果。

16. lib/Controller目錄說明
1個Design產出1個Model，而Model的
命名方式如下
BasicModel.cs不要自行修改(因重新產
生程式碼時將可能被覆寫)
BasicModel@.cs 可自行修改(可以有多個)
BasicModel@Canred.cs

18. LKWebTemplate的資料庫初始化功能
initDataBase/step.aspx

20. 設定你的web site的共用環境變量

22. LKTemplate 實作出來的網站應用

31. 系統自帶的錯誤訊息處理功能
Webclome to Extjs...

32. Session VS DBSession

33. SessionHelper中不同的慨念

34. Devices
IS

35. File & FileInfo
● ns.lib.util.File.save(man,ref request,fileId,saveFolder[])

36. Lan 語言的支持
不同于.net的語言支持的慨念.
在js有Message打頭的字眼,既是語言設定檔案.
為什麼我要如此設計???
1.LAN的支持必須同時支援 C#(後台) 與 Client(前台)
2.LAN的變動性高

37. 使用ExtJs建立使用者操作介面

38. Demo

39. 建立一個可以不
斷複用的計算機

40. 用到的ExtJs Function
1.Ext.onReady (程式進入點)
2.Ext.define(...) (我要一個框)
3.Ext.create(...) (屬性)
4.up , down(‘#ItemId’)
5.事件相關
on
fireEvent
6.其他ItemId , show (showAt), close , Ext.ns(動態加載就靠他)

41. 完成品

42. LK&Ext.Direct
運行原理說明

44. Ext.Direct

45. LK & Ext.Direct 的運行原理
Aspx頁面
Proxy.ashx
Router.ashx
反射
DirectMethod
Ext.
Direct
MasterPage
MasterPage

46. LKWebTemplate
演進過程

47. Roadmap
4 54

48. Roadmap
6 ?6
WebAppWebDesktop
WebDesktopSencha Touch
Sencha Touch

49. 01.Cross Post (跨域提交)
DirectAuth.xml 說明 / Demo
02.系統初始化工具
03.安全提昇(2.4)
04.身份認證中心功能(2.4)
05.Easy Share Direct Service
06.Proxy中的Proxy(2.4)
07.人員/公司資料”偽Cluster”
08.Support Sync AD Data.(2.4)
09.Easy Gen Code … etc.(3.0)

50. 10. Cluster 心跳器(3.0)
11. 檔案 / 排程中心(3.0)
12. ExtJs 6.2(3.0)
13. Web Desgin Data Model
14. Turnning(3.0)
什麼時
侯換我
上場

51. 在這樣下去是不行
的…還要更快速,支
援更多

53. 8.ExtJs 相關參考
http://extjscanred.blogspot.tw/