【翻譯】Ext JS從頭開始之一
歡迎來到新的部落格系列“Ext JS從頭開始”的第一部分。為什麼要寫這個系列？嗯，在不斷收到客戶有關Ext JS學習曲線的反饋後，發現他們在學習Ext JS時所面臨的挑戰之一是缺乏基礎知識，或者是沒了解過Ext JS是如何運作的，他們只是學習了一種模式之後就開始了。
在本系列中，將解釋清楚Ext JS是如何以及為什麼是這樣運作的，而這，將通過一些簡單的例子來說明。在這一系列文章中，將建立一個功能齊全的Ext JS應用程式，也就是所謂的“從頭開始”。
讓我們開始吧！
從最簡單的HTML5的Web應用程式開始是最好不過的方式。HMTL5的Web應用程式是面向資料的，包含以下三個方面：
- HMTL：用來告訴Web瀏覽器如何去繪製內容的“標記”
- CSS：層疊樣式表，用來指示瀏覽器如何去樣式化HTML標籤（字型、顏色等等）
- Javascript：用於維護HTML的程式語言，實際上，在瀏覽器中被稱為DOM或文件物件模型。
以下被命名為index.html的檔案，是一個簡單的HTML5應用程式。要注意的是，縮排和間距是雖然不是必須的，但很好的使用他們，可以使內容具有更好可讀性。
基本Web頁面：
<!DOCTYPE HTML>
<html>
<head>
<title>Ext JS From Scratch - Part 1, Demo 1</title 下面來分析一下這個檔案，它可以被分解為一組開始和結束的HTML標籤：
- 第1行表示該檔案是一個HTML5檔案
- 第2行和第35行是開始和結束的html標記，在html標籤內是head和body標籤
- 第3~8行是head標籤，它包含了3個檔案（目前是空的）的引用，這些檔案將用來儲存將要編寫的CSS和JavaScript指令碼
- 第9行和第34行是body標記，它裡面的其他標記用來高速瀏覽器將要顯示什麼或者使用JavaScript程式碼來注入更多標記（很快就會實現這個）。
在瀏覽器開啟這個檔案將會看到以下頁面：
以上頁面顯示了一個網格，頂行是網格的標題，第二行是列標題，其餘是網格的資料。對於這個頁面，需要助於的是：首先，這個頁面沒有主題，它只是白色背景上的黑色文字；其次，頁面是靜態的，資料在頁面上是硬編碼。在常見的Web應用程式中，資料基本上是動態的，並且是基於伺服器的資料，下面來解決這個問題。
使用CSS來建立主題
CSS一般是用來樣式化或主題化應用程式。在theme.css，已經為HTML檔案添加了以下樣式，重新整理瀏覽器將看到結果。
.x-viewport {
margin: 0; border: 5px solid green;
width: 100%; height: 100%; right: 0; top: 0;
overflow: hidden;
position: absolute; box-sizing: border-box;
}
.x-grid {
font-family: Roboto, sans-serif;
font-weight: 400;font-size: 18px; width: 100%;
}
.gridTitle {
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
display: flex;
align-items: center;
justify-content: center;
background: #2196f3; color: #FFFFFF;
height: 48px;
}
.blueTable {
margin-top: 48px;
border-collapse: collapse;
font-weight: 100;font-size: 14px; width: 100%;
}
.blueTable td, .blueTable th {
border: 1px solid #E6E6E6; padding: 10px;
}
.blueTable th {
font-weight: 600;text-align: left;
}瀏覽器的顯示結果：
要建立工作良好的和跨瀏覽器工作的CSS並不容易。在後續文章中將會看到Ext JS帶有一整套的主題，而這些主題可以很容易對他們進行修改。
使用Javascript讓頁面充滿生機
現在，讓我們來解決頁面上的互動問題，如事件（如單擊一行），以及在網格中使用靜態的資料標籤。實際上，在頁面body內的html標籤都是靜態標籤。幸運的是，使用Javascript可以對頁面中的任何部分進行操作，並可以動態的繪製頁面，而這，就是一個框架所要租毆打事情，因而，我們來觀察一下以下兩個步驟：
步驟1：在Ext-lite.js內，包含了一些框架程式碼，將這些程式碼定義為框架程式碼意味著這些程式碼對於任何一個應用程式來說都是相同的，而這包含了輔助函式和任何其他的不特定於應用程式自身的程式碼。
對於第一次迭代，包含了表格中每一行的單擊事件的程式碼（addRowHandlers），還添加了等待DOM內容載入後（表示頁面已經準備好執行程式碼了）執行launch函式的程式碼。在launch函式中，就可以編寫應用程式程式碼了：
document.addEventListener("DOMContentLoaded", function(event) {
launch();
});
function addRowHandlers(table, fn) {
var table = document.getElementById(table);
var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var row = table.rows[i];
var cols = row.getElementsByTagName("td");
var o = {};
for (var j=0;j<cols.length;j++) {
o['c'+j]=cols[j].innerHTML;
}
var record=[];
record[0] = {};
record[0].data = o;
row.onclick = function() {return fn(row,record)};
}
}步驟2：在app.js的launch函式中，包含了呼叫addRowHandlers函式所需的程式碼。在這裡，要清楚的一點是，在Ext-Lite.js檔案內的框架程式碼只是提供給我們使用並讓我們專注於應用程式開發的程式碼，我們的應用程式開發是在app.js中完成的，而不是在框架程式碼中。
function launch() {
console.log('page is loaded');
addRowHandlers("ext-table1", onSelect);
};
function onSelect(sender, record) {
var r = record[0].data;
var text = r.c0+' - '+r.c1+' - '+r.c2;
alert(text);
};重新整理頁面並單擊Manger這一行，將看到如下輸出：
最後，我們來解決body中的靜態標籤問題，正如上面所提到的，可以使用Javascript在頁面中動態建立html。
觀察一下靜態HTML的的結構，會看到類似於以下的邏輯結構：
<body>
<viewport>
<grid>視區（viewport ）是每一個應用程式的公共部分，而網格自身包含一些動態項：
- xtype：在Ext JS中，物件的型別被稱作xtype
- 標題（title）：面板中頁首的內容
- 列（columns）：網格中所有列的描述
- 資料（data）：填充網格的資料
- 偵聽器（listeners）：用來偵聽物件事件的集合
是否可以刪除頁面中的靜態HTML（允許框架使用Javascript來動態建立他們），並在launch函式中建立一個包含xtype、標題、列、資料和事件的邏輯“網格”作為視區的子物件呢？如以下程式碼：
{
xtype: 'grid',
title: 'Users',
columns: [
{ name: 'Name' },
{ name: 'Email' },
{ name: 'Phone number' }
],
data: data,
listeners: {
select: onSelect
}
}首先，需要新增一些功能到Ext-lite.js用來動態建立HTML，在以下地址可以檢視這些程式碼：
在Ext-list.js中會看到許多程式碼，這些程式碼是Ext JS框架用來表示程式碼型別的程式碼，你必須去編寫這些程式碼，框架會為你提供這些程式碼。我們只需要在app.js的launch函式中編寫程式碼，如以下看到的內容。
在index.html檔案中會看到以下程式碼（注意，在body中沒有任何標籤）：
<!DOCTYPE HTML>
<html>
<head>
<link href='theme.css' rel='stylesheet'/>
<script src='Ext-lite.js'></script>
<script src='app.js'></script>
</head>
<body></body>
</html>在app.js中，修改後的程式碼如下：
function launch() {
Viewport.add({
xtype: 'grid',
title: 'Users',
columns: [
{text: 'Name', width: 100, dataIndex: 'name'},
{text: 'Email Address', flex: 1, dataIndex: 'email'},
{text: 'Phone Number', width: 200, dataIndex: 'phone'}
],
data: data,
listeners: {
select: onSelect
}
});
}
function onSelect(sender, record) {
var r = record[0].data;
var text = r.name+' - '+r.email+' - '+r.phone;
alert(text);
};
var data = [
{ name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
{ name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
{ name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
{ name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
]現在，使用了一種只需定義所需的使用者介面和要做什麼的，而不需要知道如何構造HTML的方法來定義外觀。對於建立一個應用程式來說，這相當的簡單，而這，整數Ext JS的意義！
使用Ext框架來建立應用程式
對於這個示例，已經將Ext JS 6.5.2框架複製到名為6.5.2的資料夾。要使用這個，需要使用Ext JS的許可證版本或者獲取一個框架的試用版本：https://www.sencha.com/products/extjs/evaluate
首先，在index.html檔案，將第5行連結到Ext JS的主題“Material”主題（仿google的Material規範）。第6行連結的是Ext JS的現代工具包（該示例引用的是整個框架，在未來的本系列的部落格文章中，將會看到如何更好的將Ext JS框架包含在應用程式中）。最終的index.html頁面如下所示：
<!DOCTYPE HTML>
<html>
<head>
<title>Ext JS From Scratch - Part 1, Demo 5</title>
<link href='ext-6.5.2/build/modern/theme-material/resources/theme-material-all-debug.css' rel='stylesheet'/>
<script src='ext-6.5.2/build/ext-modern-all.js'></script>
<script src='app.js'></script>
</head>
<body></body>
</html>在app.js中，唯一變化是將launch函式作為一個物件引數封裝在一個 Ext.application的例項中（在未來的部落格中將解釋為什麼要這樣做）：
Ext.application({
launch: function () {
Ext.Viewport.add({
xtype: 'grid',
title: 'Users',
columns: [
{text: 'Name', width: 100, dataIndex: 'name'},
{text: 'Email Address', flex: 1, dataIndex: 'email'},
{text: 'Phone Number', width: 200, dataIndex: 'phone'}
],
data: data,
listeners: {
select: onSelect
}
});
}
});
function onSelect(sender, record) {
var r = record[0].data;
var text = r.name+' - '+r.email+' - '+r.phone;
alert(text);
};
var data = [
{ name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
{ name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
{ name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
{ name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
]
});應用程式最終的效果如下：
就是它了——你的第一個事實上上的Ext JS應用程式！它比從頭開始所建立的第一個應用程式功能更強大。Ext JS網格可以做的事包括排序、大資料處理、列隱藏和更多！如果對Grid還能用來做什麼有興趣，可以檢視Kitchen Sink示例：
你所需要做的就是修改launch函式，其餘的Ext JS框架會為來實現。
你可能會希望在這裡寫一個更復雜的應用程式。在這系列文章中，將會覆蓋更多的東西，而到目前為止，已經有了很大進展。敬請關注即將推出的Ext JS從無到有系列之二。
作者：Marc Gusmano
Marc is a Sales Engineer with Sencha and has more than 30 years of experience in the software services industry. He has been extensively involved with custom HTML5 browser and mobile development projects, using his experience to build HTML5 Single Page Applications. Marc has worked for several large software services companies, including Andersen Consulting and Hitachi Consulting, and he was co-owner of a software services and training company for more than 10 years. Marc has a passion for building outstanding software, especially leading-edge, user-centric applications.
相關推薦
【翻譯】Ext JS從頭開始之一
歡迎來到新的部落格系列“Ext JS從頭開始”的第一部分。為什麼要寫這個系列？嗯，在不斷收到客戶有關Ext JS學習曲線的反饋後，發現他們在學習Ext JS時所面臨的挑戰之一是缺乏基礎知識，或者是沒了解過Ext JS是如何運作的，他們只是學習了一種模式之後就
【翻譯】在Ext JS整合第三方庫
作者：Kevin Kazmierczak Kevin Kazmierczak is a Senior Technical Architect at Universal Mind, an innovativ
【node】記錄項目的開始與完成——pipeline_kafka流式數據庫管理項目
可能 gui sasl認證 header dex images ref 最好的 最好 前言： 我始終堅信的一點是，學習的效果80%來自總結，甚至全部都是。總結的好處就是讓你能翻出你的過往，指出其中的不足，看到未來的改進方法，好的總結更能讓知識產生飛躍，所以在工作之余，
【翻譯】 View Frustum Culling --1 View Frustum’s Shape
near com 矩形區域 狀態 翻譯 cnblogs 位置 移動 距離 這是一些列來自lighthouse3d的視錐體裁剪教程。旨在學習總結，及便於查閱。 1、視錐體的形狀 在OpenGL中，透視投影是由兩個函數定義的gluPerspective和gluLookAt
【翻譯】關於vertical-align所有你需要知道的
增加 大寫 內聯 簡單 -s 列表 fin 技術分享 解決方案 本文是翻譯過來的，如果有不對的地方還請指教~，原文鏈接：Vertical-Align: All You Need To Know 前面一些說明，可以略過不看吧 我經常需要對元素進行垂直方向上的布局。 CSS提供
【前端】Vue.js經典開源項目匯總
查詢 可見 專業 codec ssa mark 高級 coffee init Vue.js經典開源項目匯總 原文鏈接：http://www.cnblogs.com/huyong/p/6517949.html Vue是什麽？ Vue.js（讀音 /vju?/, 類似
【前端】vue.js實現按鈕的動態綁定
case ctype html 們的 ast pre cal 防止 得到 vue.js實現按鈕的動態綁定 實現效果： 實現代碼以及註釋： <!DOCTYPE html> <html> <head> <title>按鈕
【翻譯】ASP.NET Core 文檔目錄
www asp nbsp .com col actions size 組件 ons 簡介 入門 創建一個Web應用程序 創建一個Web API 教程 基礎 MVC Razor Pages Razor 語法 Model 綁定
【轉】使用js觸發事件
rda ctype rem odi scroll cancel script 事件 some 如果大家將一張網頁看成一個form的話，大致上就成了一個web form的模型。在win form 下要想手動觸發某一個對象的事件是很簡單的，只要發送一條消息即可達成。
GTD190018:【翻譯】The Case Against Civilization
sed trait intervals cycle variety enter method nor get https://www.newyorker.com/magazine/2017/09/18/the-case-against-civilization
【翻譯】‘BadRabbit’ Ransomware Burrows Into Russia, Ukraine
ati exe rar product ner qcow dns query rep stream 【來源】 ‘BadRabbit’ Ransomware Burrows Into Russia, Ukraine By Raj Samani and Christiaan B
【整理】原生js和jQ獲取窗口寬高及滾動條的方法和函數
javascript 滾動條 jq 窗口距離 原生js和jQ獲取窗口寬高及滾動條的方法和函數 一。原生js獲取 1.實際寬高（不包括工具欄，滾動條的視口高度，ie6.7.8不支持） window.innerHeight window.innerWidth 2.顯示屏寬高 screen.h
【翻譯】在GitHub上通過星級評估排名前10的最受歡迎的開源Delphi項目
href ref -s 編程 強烈 使用 系統 ioc 進行 GitHub上有相當多的Delphi開源項目可以為你節省一些時間。我在GitHub上搜索了Delphi，然後按最主要的項目進行排序，並列出了前十名單。這裏有一些非常好的東西，包括Awesome Delphi（這是
【翻譯】《向“彈跳球”演示程序添加新功能》 in MDN
dev tps sts color htm html nes obj doc 文章地址： https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/%E5%90%91%E2%80%9C%E5%BC%B
【轉載】Ajax JS 跨域請求
-h 資源 pla dom light data 常用 clas json 原文： 簡單的ajax請求：http://blog.csdn.net/net_lover/article/details/5172509 復雜的ajax請求：http://blog.csdn.net
【翻譯】- EffectiveAkka-第二章（一）
未來 接口 ask success 就是 -m des exec uri Actor使用模式 現在我們已經了解了可以創建的actor系統的不同類型，那麽我們在編寫基於actor的應用程序時，可以采用什麽樣的使用模式，以便避免出現常見錯誤呢？ 下面就讓我們看看其中使用模式
【翻譯】Apache Shiro10分鐘教程
做什麽 網頁 cnblogs 讓我 技術 參考手冊 user com 分鐘 本文為翻譯文，原文地址：http://shiro.apache.org/10-minute-tutorial.html 介紹 歡迎來到Apache Shiro的10分鐘教程！ 通過這個教程，你會完全
【翻譯】Temporal supersampling and antialiasing
鋸齒 In TE ant bar can add rec always 原文鏈接：https://bartwronski.com/2014/03/15/temporal-supersampling-and-antialiasing/ Aliasing problem鋸齒問題
【轉】通過js獲取系統版本以及瀏覽器版本
返回 ati event 一個數 alt eve qq瀏覽器 搜狗瀏覽器 rms 1 function getOsInfo() { 2 var userAgent = navigator.userAgent.toLowerCase(); 3
PLSQL簡介（一）【翻譯】
發展 奇怪 設置 操作系統 fort 成熟 解決 之一 其他 PLSQL簡介（一）【翻譯】 原書：steven feuerstei-oracle PLSQL grogramming 2014 PL / SQL代表“結構化查詢語言和過程語言。 Oracle公司推出了PL