如何使用sencha網格構建16個Web應用程序

使用Sencha ExtReact Grid高效管理和顯示React 16應用中的大型數據集，充分利用內置功能（如排序、過濾和編輯），無需大量DOM操作。

關鍵要點:

• 利用Sencha ExtReact Grid在React 16應用程序中高效管理和顯示大型數據集，利用內置功能（如排序、過濾和編輯），無需大量DOM操作。
• 使用ExtReact npm包和ExtReact應用程序生成器快速設置功能齊全的React應用程序，從而簡化開發流程。
• 通過將交互式組件（如按鈕和火花線圖）直接嵌入網格單元格中來增強用戶界面，提供動態且響應迅速的用戶體驗。
• 利用網格導出程序插件，只需少量代碼即可啟用數據導出功能，允許用戶直接從網格導出數據到Excel或CSV格式。
• 使用條件插件和響應式設計功能，優化桌面和移動平台的應用程序，確保無縫的跨平台用戶體驗。

本文最初發表於Sencha。感謝您支持使SitePoint成為可能的合作夥伴。

React 16是基於React新的核心架構（代號為“Fiber”）構建的第一個React版本。 React 16從根本上設計為支持異步渲染，這允許處理大型組件樹而不會阻塞主執行線程。它支持許多關鍵功能，例如使用錯誤邊界捕獲異常、從渲染返回多個組件、減小文件大小和支持MIT許可證。

如果您正在使用React 16開發數據驅動的Web應用程序，則您很有可能會在某個時候使用網格或類似電子表格的界面來顯示用戶的數據。根據具體情況，您的用戶可能希望應用程序中的網格能夠：

• 帶有固定標題的滾動
• 通過單擊列標題進行排序
• 顯示和隱藏特定列
• 分頁、分組和匯總
• 編輯單元格中的數據
• 導出到Excel
• 深入/行擴展

網格可能是React中最棘手和最複雜的UI組件之一，因為許多必要的功能都需要大量的React專業知識，以及深入研究DOM的意願和能力。幸運的是，ExtReact Grid提供了所有這些功能以及更多功能。

在本文中，我們將使用Sencha ExtReact Grid創建一個示例，該示例顯示有關股票和股票公司的信息。如果您想使用HTML表格或其他第三方組件編寫網格，您可能需要執行諸如處理單擊列標題以進行排序、單擊列標題之間的分隔符以調整大小，或者滑動分頁器並獲取下一頁數據之類的操作。使用ExtReact Grid，這些功能是內置的。想自己嘗試一下嗎？立即開始使用ExtReact的30天免費試用版——在此處註冊。

讓我們開始使用ExtReact Grid構建應用程序。

使用ExtReact應用程序生成器入門

要開始使用ExtReact組件開發React應用程序，請按照以下步驟操作：

確保您已設置Node環境

首先，確保您的系統上已設置Node 8.11 和NPM 6 。您可以從Node網站下載最新的Node版本。如果您已經安裝了Node，則可以使用以下命令輕鬆檢查node和npm版本：

<code>node -v
npm -v</code>

獲取ExtReact npm存儲庫的登錄憑據

ExtReact npm包託管在Sencha的私有npm存儲庫中。您只需登錄該存儲庫一次即可訪問所有ExtReact包。要獲取登錄憑據，請訪問ExtReact 30天免費試用頁面並填寫表格。我們將向您發送一封包含登錄詳細信息以及一些資源鏈接（例如文檔和示例項目）的電子郵件。

登錄ExtReact npm存儲庫並獲取ExtReact應用程序生成器

下一步是登錄到Sencha的私有npm存儲庫，該存儲庫託管ExtReact包。使用您的npm登錄名（在電子郵件中提供）將存儲庫與@sencha範圍關聯，並在出現提示時輸入憑據：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

下一步是安裝ExtReact生成器包。

<code>npm install -g @sencha/ext-react-gen</code>

創建您的第一個React應用程序

運行Yeoman生成器以創建您的第一個ExtReact應用程序：

<code>ext-react-gen app your-app-name-here -i</code>

生成器將要求您命名您的應用程序、命名npm包並選擇主題。默認的Material主題（基於Google的Material設計指南）是一個不錯的起始主題。選擇“生成一個空應用程序”。生成器還將提示您為項目創建一個新目錄。然後，生成器將下載並創建您的示例應用程序，包括相關的依賴項。

運行您的React應用程序

在生成器輸出中，您將找到運行應用程序的步驟。這就像更改到您的新應用程序目錄並使用以下命令運行應用程序一樣簡單：

<code>npm start</code>

這將啟動應用程序，您的空React應用程序將僅顯示應用程序的標題。應用程序中的主組件（例如StocksGrid）在根目錄處有一個容器，該容器被標記為全屏，佈局設置為fit，這意味著它將拉伸其子元素以填充它。

請參閱GitHub上的此步驟之前的代碼。

向應用程序添加網格

添加股票數據

我們將向應用程序添加一個示例數據集，稱為stocks.json。這是一個相當大的數據集，大約有10,000行json數據，每一行代表一家公司或股票代碼——因此我們有公司名稱、股票代碼、行業、他們所在的行業，以及一個包含該股票最後5次銷售的滴答數組。這是我們將在網格中顯示的數據。在實際應用程序中，所有這些數據都將在後端返回。我們將為此示例應用程序靜態加載它，而不是遍歷如何構建後端rest API的所有機制。但是它將以與您從實際後端獲取數據完全相同的方式加載。

創建基本網格

在StockGrid組件render方法中，我們將返回一個帶有列的網格。

要在網格中放置列，我們使用column組件，它採用與stocks數據名稱字段相同的dataIndex。它採用作為列標題文本的text prop，然後我們還可以為列指定寬度，例如固定寬度或flex，或者flex和最小值或最大值的組合。我們將為公司名稱、代碼、滴答、行業和行業添加column組件。創建如下所示的新StocksGrid類：

<code>node -v
npm -v</code>

現在，將StockGrid添加到Class App中，如下所示：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

請參閱GitHub上的此步驟之前的代碼。您將能夠在npm start上看到帶有空網格的Web應用程序。

使用網格綁定股票數據

ExtReact中的網格是從Ext Data Store中提取並呈現數據的表。在ExtReact中，我們的存儲實現是一個數據結構，允許您為網格或組件（如列表或圖表）排序和過濾數據。

我們現在可以開始加載股票數據並創建存儲。同樣，網格始終從存儲中獲取其數據，並且與網格的一些交互將觸發存儲上的事件，例如重新加載、排序或分頁。為此，我們將在此處創建我們的存儲。

Ext數據存儲與flux存儲不同。使網格和存儲與標準React方法略有不同的是，兩者緊密集成。通常，您可以將數據直接傳遞到存儲，或者存儲可以使用代理自行從後端提取數據。使用ExtReact Grid，您可以獲得交互式功能，例如過濾、排序、分頁、分組和匯總，而無需實際編寫代碼。

在此示例中，我們直接從Stocks數據文件將數據傳遞到存儲。您還可以使用代理配置創建存儲——擁有代理允許我們執行各種很棒的操作，例如遠程分頁、過濾和排序。我們將autoload設置為true，因此它會自動加載網格。數據並非按任何標準特別排序，因此我們將通過指定name屬性在客戶端對其進行排序。

<code>npm install -g @sencha/ext-react-gen</code>

在Grid中，將store配置分配給創建的store。

<code>ext-react-gen app your-app-name-here -i</code>

現在，我們有一個包含所有數據的網格，如下所示：

使用這段簡單的代碼，您可以免費獲得許多功能——例如排序——這允許您單擊任何列標題，它會自動排序（請參閱下面的符號列）。

在這種情況下，排序是在客戶端完成的。但是，如果我們實現了真實的後台API，我們可以配置代理在後台進行遠程排序，並在數據庫中使用“order by子句”進行排序。

您還可以免費獲得可調整大小的列。因此，即使我們在這些列上設置了寬度，如果用戶想查看或關閉某些內容，他也可以通過左右拖動列來實現。

您還可以獲得一個不錯的分組功能。因此，如果我們想按行業分組，我們可以說按此字段分組，它將按行業的值對所有數據進行分組，並且在您向下滾動每個分組時，它將為您提供一個固定的標題。

您會注意到，對於10,000條記錄，此數據渲染速度非常快。它渲染速度如此之快的原因是它使用了我們所說的緩衝渲染。因此，儘管此表看起來已滿，並且您可以向下滾動，並且它會不斷地繼續下去，但在初始加載時，它只渲染比您實際看到的“視口高度”多一點的內容。

當您向下滾動時，它實際上會用較新的記錄替換單元格的內容，就像您在存儲中向下分頁一樣。因此，它實際上盡可能地保留了DOM元素，並保持DOM較小，從而使內存消耗較小並確保高性能。

請參閱GitHub上的此步驟之前的代碼。

設置網格樣式

有多種方法可以設置網格樣式，以便更容易分析數據。

使用Cell prop

讓我們來看看控制單元格樣式的方法。我們可以使名稱加粗——最好的方法是使用cell prop。 cell採用許多配置，這些配置控制單元格的外觀。我們將在此處添加一個style配置，然後我們將說fontWeight等於粗體。

<code>node -v
npm -v</code>

在行中添加按鈕

現在，我們將做一些更適用於現實世界的事情。假設我們想要一個按鈕，我們可以單擊該按鈕來購買左側列中的其中一隻股票。為此，我們可以添加一列，這次我們不會添加dataIndex，因為它不對應於字段中的任何特定項目或存儲中的任何字段。我們將添加一個帶有Button的WidgetCell。我們將進行一些樣式設置——我們將為其添加一個圓形操作UI，因此按鈕將具有圓形操作外觀：

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

我們將使用的buy handler非常簡單。當您單擊購買按鈕時，我們將只使用名為ext.toast的假設，它將在頂部顯示一條小提示消息，顯示您要購買的股票的代碼。同樣，我們將渲染每一行將要渲染的列。我們將渲染此按鈕，然後當您單擊它時，它將調用此函數：

<code>npm install -g @sencha/ext-react-gen</code>

您可以從此示例中看到，您基本上可以在網格單元格內嵌入任何ExtReact組件，並且它是完全交互式的。它充當完整的React組件。

請參閱GitHub上的此步驟之前的代碼。

添加趨勢火花線圖

在Stock Data中，我們有最後五次股票銷售的滴答數組。讓我們將其作為火花線圖嵌入網格中。我們將使用widgetcell在網格單元格內渲染ExtReact組件。

<code>node -v
npm -v</code>

當您使用鼠標懸停在線圖中的不同點上時，它將顯示格式化為兩位小數的Y值。

請參閱GitHub上的此步驟之前的代碼。

將數據導出到Excel

數據密集型應用程序中的常見要求之一是將數據導出到Excel。 ExtReact通過使用網格的plugins prop可以輕鬆實現此目的。

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

為了方便調用導出功能，我們將添加更多組件。我們將添加titlebar並將titlebar停靠在網格頂部並在其中放置一個菜單。當您單擊“導出”按鈕時，您將可以選擇導出到Excel或CSV。

<code>npm install -g @sencha/ext-react-gen</code>

導出處理程序將傳遞導出類型和文件名擴展名：

<code>ext-react-gen app your-app-name-here -i</code>

確保在package.json依賴項中包含導出程序。例如：

<code>npm start</code>

安裝依賴項。

<code><grid> ></grid>
      <column> dataIndex="name" text="Name" width={300} /></column>
      <column> dataIndex="symbol" text="Symbol" /></column>
      <column> dataIndex="ticks" text="Trend" /></column>
      <column> dataIndex="sector" text="Sector" width={200} /></column>
      <column> dataIndex="industry" text="Industry" width={350} /></column>
></code>

Exporter插件支持將數據導出到各種文件格式。它支持原生XSLX、Excel XML以及HTML和CSV/TSV（逗號/製表符分隔值）格式。

請參閱GitHub上的此步驟之前的代碼。

向網格添加編輯功能

我們可以通過添加編輯數據的功能，使網格更像電子表格。要添加此功能，我們需要添加另一個名為gridcellediting的插件。通過添加此插件並將可編輯的列標記為可編輯，您現在擁有可以通過雙擊任何網格單元格來編輯的網格數據。您可以通過在網格單元格中按Tab鍵來繼續編輯網格。

添加網格單元格編輯插件：

<code>export default class App extends Component {
  render() {
       return (
           <extreact></extreact>               <stocksgrid></stocksgrid>              
       )
   }
}</code>

使“名稱”可編輯：

<code>     this.store = new Ext.data.Store({
           data: stocks,
           autoLoad: true,
           sorters: [{
               property: 'name'
           }],
           listeners: {
               update: this.onRecordUpdated
           }
       })</code>

處理編輯事件

如果您想在編輯網格單元格後執行一些特殊操作，則可以偵聽存儲中的數據更改事件。您可以通過添加偵聽器配置和“更新事件”的偵聽器來實現。

“更新事件”將傳遞許多參數，包括存儲、更新的記錄、描述發生的事件的對象，然後傳遞已更改字段名稱的數組。您將在處理程序中添加它。在這種情況下，我們只是顯示一條提示消息。在實際應用程序中，您實際上會應用業務邏輯，例如將更改持久保存到數據庫中。

<code><grid> store={this.store}></grid>
      ...
></code>

向網格單元格添加選擇選項

如果您想向網格單元格添加“選擇”選項，則可以使用另一個名為SelectField的ExtReact組件來實現。您只需在所需的列中添加SelectField ExtReact組件即可。

<code>node -v
npm -v</code>

請參閱GitHub上的此步驟之前的代碼。

優化跨平台體驗

這對於桌面體驗效果很好，但是當您最小化移動電話體驗的屏幕大小時，單元格編輯可能不是最佳的編輯體驗。對於小型屏幕設備，您可能需要選擇不同的編輯樣式。

platformconfig選項允許您為桌面或移動設備指定行為。您可以根據PlatformConfig將任何prop設置為不同的值，在這裡，我們將根據平台設置插件。在此示例中，當應用程序在桌面上時，我們將使用gridcellediting。當應用程序在移動設備上時，我們將使用grideditable，它提供了一種在移動設備上編輯數據的更好方法。

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

請參閱GitHub上的此步驟之前的代碼。

您可以使用ExtReact 6.6網格，並使用React 16輕鬆地向數據驅動的Web應用程序中添加類似電子表格的界面。使用ExtReact，您可以使用任何Ext JS現代組件，包括網格、樹狀網格、透視網格、圖表、D3可視化等等——無需自定義。您可以構建一個優化的最小化包，其中僅包含您在應用程序中使用的組件。您可以通過使用在桌面和移動設備上看起來都很棒的佈局和自適應設計功能來構建沉浸式用戶參與。提醒您，您可以立即開始免費試用ExtReact的30天試用版——在此處註冊。

有關使用Sencha Grid構建React 16 Web應用程序的常見問題

什麼是Sencha Grid，它如何與React 16集成？

Sencha Grid是一個高性能的網格組件，旨在處理大量數據。它與React 16（一個流行的用於構建用戶界面的JavaScript庫）無縫集成。這種集成允許開發人員利用React的基於組件的架構的強大功能以及Sencha Grid的強大功能，例如數據排序、過濾、分組和編輯。這種組合為構建複雜的Web應用程序提供了強大的工具。

如何在我的React 16應用程序中開始使用Sencha Grid？

首先，您需要使用npm（Node.js的包管理器）安裝Sencha Grid包。安裝後，您可以將Sencha Grid組件導入到您的React應用程序中，並像使用任何其他React組件一樣使用它。 Sencha Grid組件提供了各種prop，您可以使用這些prop來自定義其行為和外觀。

我可以將Sencha Grid與其他JavaScript框架或庫一起使用嗎？

是的，Sencha Grid的設計是與框架無關的，這意味著它可以與任何JavaScript框架或庫一起使用。但是，由於React和Sencha Grid都具有基於組件的特性，因此與React 16的集成特別無縫。

Sencha Grid的一些關鍵功能是什麼？

Sencha Grid提供了廣泛的功能，使其成為顯示和操作大量數據的強大工具。這些功能包括數據的排序、過濾、分組和編輯，以及高級功能，如無限滾動、行擴展器和列鎖定。網格還支持各種數據類型和格式，並且可以輕鬆自定義以滿足您的應用程序的需求。

Sencha Grid如何處理大量數據？

Sencha Grid旨在高效地處理大量數據。它使用虛擬滾動機制，該機制僅渲染當前在視口中可見的行。這意味著即使您的網格有數千甚至數百萬行，性能仍然很高，用戶體驗也很流暢。

我可以自定義Sencha Grid的外觀嗎？

是的，Sencha Grid提供了各種自定義其外觀的選項。您可以使用CSS更改顏色、字體和其他樣式，還可以使用其廣泛的API自定義網格的佈局和行為。

如何處理用戶與Sencha Grid的交互？

Sencha Grid提供了各種事件，您可以偵聽這些事件以處理用戶交互。這些事件包括單擊事件、選擇事件、編輯事件等等。通過偵聽這些事件，您可以在應用程序中實現複雜的行為和交互。

我可以在商業應用程序中使用Sencha Grid嗎？

是的，Sencha Grid可用於商業和非商業應用程序。但是，對於商業用途，您需要從Sencha購買許可證。

如何更新Sencha Grid中的數據？

Sencha Grid提供了多種更新數據的方法。您可以更新整個數據集，也可以更新單個行或單元格。當數據更新時，網格會自動重新渲染受影響的行或單元格。

Sencha Grid提供了哪些類型的支持？

Sencha為Sencha Grid提供了全面的文檔和教程，以及一個社區論壇，您可以在其中提問並與其他開發人員分享知識。此外，Sencha還為需要額外幫助或指導的客戶提供專業的支持和諮詢服務。

以上是如何使用sencha網格構建16個Web應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！