Senchaグリッドで16のWebアプリを反応する方法

多くのDOM操作を必要とせずに、並べ替え、フィルタリング、編集などの組み込み機能を活用して、Sencha Exherct Gridを使用して、Sencha Exheract Gridを使用して、React 16アプリケーションで大規模なデータセットを効率的に管理および表示します。

キーポイント：

多くのDOM操作を必要とせずに、並べ替え、フィルタリング、編集などの組み込み機能を活用して、Sencha Exherct Gridを使用して、React 16アプリケーションで大規模なデータセットを効率的に管理および表示します。
Exherct NPMパッケージとExtreaCt Application Generatorを使用して、開発プロセスを簡素化します。
ボタンやスパークライン図などのインタラクティブなコンポーネントをグリッドセルに直接埋め込み、動的で応答性の高いユーザーエクスペリエンスを提供することにより、ユーザーインターフェイスを強化します。
Grid Exporterプラグインを使用して、少量のコードでデータエクスポート機能を有効にし、ユーザーがグリッドからExcelまたはCSV形式に直接データをエクスポートできるようにします。
条件付きプラグインとレスポンシブデザイン機能を使用して、デスクトッププラットフォームとモバイルプラットフォームのアプリケーションを最適化して、シームレスなクロスプラットフォームユーザーエクスペリエンスを確保します。

この記事はもともとSenchaで公開されました。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

React 16は、Reactの新しいコアアーキテクチャ（コードネーム「ファイバー」に基づいて構築された最初のReactバージョンです。 React 16は、非同期レンダリングをサポートするように基本的に設計されています。これにより、メインの実行スレッドをブロックせずに大きなコンポーネントツリーを処理できます。エラー境界で例外をキャッチすること、レンダリングから複数のコンポーネントを返す、ファイルサイズの削減、MITライセンスのサポートなど、多くの重要な機能をサポートしています。

React 16を使用してデータ駆動型のWebアプリケーションを開発している場合、グリッドまたはスプレッドシートのようなインターフェイスを使用して、ある時点でユーザーデータを表示する可能性が高くなります。状況に応じて、ユーザーはアプリケーションのグリッドをできるようにすることができます。

固定タイトル

でスクロールします
• 列のタイトルをクリックして並べ替えます
• 特定の列を表示して非表示
• ページング、グループ化、要約
• セルでデータを編集します
• excel
へのエクスポート
• depth/line拡張子
• 必要な機能の多くには多くのReactの専門知識が必要であり、DOMを詳細に掘り下げる意欲と能力が必要であるため、
メッシュはおそらく最も困難で複雑なUIコンポーネントの1つです。幸いなことに、Extreact Gridはこれらすべての機能などを提供します。

この記事では、Sencha Exheract Gridを使用して、株式と株式会社に関する情報を表示する例を作成します。 HTMLテーブルまたはその他のサードパーティコンポーネントを使用してグリッドを書きたい場合は、列ヘッダーのクリックを処理する、列ヘッダーの間のセパレーターをクリックしてサイズを変更するか、ページャーをスライドさせてページをスライドさせて取得するなど、グリッドを書きたい場合は、ページデータなどの次の操作。 Extreact Gridを使用すると、これらの機能が組み込まれています。自分で試してみませんか？今すぐExtreaCtの30日間の無料トライアルを始めましょう - こちらからサインアップしてください。

Extheract Gridを使用してアプリケーションの構築を開始しましょう。

Extreact Application Generatorの開始

Exheractコンポーネントを使用してReactアプリケーションの開発を開始するには、次の手順に従ってください。

ノード環境をセットアップしていることを確認してください

最初に、システムにノード8.11とNPM 6が設定されていることを確認してください。ノードWebサイトから最新のノードバージョンをダウンロードできます。既にノードがインストールされている場合は、次のコマンドを使用してノードバージョンとNPMバージョンを簡単に確認できます。

EXTREACT NPMリポジトリのログイン資格情報を取得

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

Extreact NPMパッケージは、SenchaのプライベートNPMリポジトリでホストされています。すべての押し出しパッケージにアクセスするために、リポジトリに1回ログインする必要があります。ログイン資格情報を取得するには、30日間の無料トライアルページにアクセスして、フォームに記入してください。ログインの詳細と、ドキュメントやサンプルプロジェクトなどのいくつかのリソースリンクを含むメールをお送りします。

Extreact NPMリポジトリでログインし、ExtreaCtアプリケーションジェネレーターを取得

次のステップは、ExherctパッケージをホストするSenchaのプライベートNPMリポジトリにログインすることです。 NPMログイン（電子メールで提供）を使用して、リポジトリを@senchaスコープに関連付け、プロンプトが表示されたときに資格情報を入力します。

次のステップは、Extreactジェネレーターパッケージをインストールすることです。

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

最初のReactアプリケーションを作成します

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

Yeomanジェネレーターを実行して最初のExherctアプリケーションを作成します。

ジェネレーターは、アプリケーションの名前、NPMパッケージに名前を付けてテーマを選択するように依頼します。デフォルトのマテリアルテーマ（Googleのマテリアルデザインガイドに基づく）は、優れたスタートテーマです。 [空のアプリケーションを生成]を選択します。ジェネレーターは、プロジェクトの新しいディレクトリを作成するように求められます。その後、ジェネレーターは、関連する依存関係を含むサンプルアプリケーションをダウンロードして作成します。

Reactアプリケーションを実行してください

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

ジェネレーター出力では、アプリケーションを実行する手順があります。新しいアプリケーションディレクトリに変更し、次のコマンドでアプリケーションを実行するのと同じくらい簡単です。

これにより、アプリケーションが起動し、空のReactアプリケーションはアプリケーションのタイトルのみを表示します。アプリケーションの主要なコンポーネント（StockSgridなど）には、ルートディレクトリにコンテナがあり、レイアウトが適合するように設定されたフルスクリーンとマークされているため、子要素を伸ばすために伸びることができます。

GitHubでこのステップの前にコードを参照してください。

<code>npm start</code>

アプリケーションにグリッドを追加します

在庫データを追加

stocks.jsonと呼ばれるサンプルデータセットをアプリケーションに追加します。これは、JSONデータの約10,000行を持つかなり大きなデータセットであり、各行は会社または株式コードを表しているため、会社名、在庫コード、業界、業界が登場し、その在庫ティックアレイを含む最後の5回を含みます。販売のため。これは、グリッドに表示されるデータです。実際のアプリケーションでは、このデータはすべてバックエンドで返されます。バックエンドREST APIの構築方法のすべてのメカニズムを反復するのではなく、このサンプルアプリケーションのために静的にロードします。ただし、実際のバックエンドからデータを取得するのとまったく同じ方法でロードされます。

基本的なグリッドを作成します

StockGridコンポーネントレンダリングメソッドでは、列付きのグリッドを返します。

列をグリッドに配置するには、列コンポーネントを使用します。列コンポーネントは、Stocksデータ名フィールドと同じDatainDexを使用します。テキストの小道具を列ヘッダーテキストとして使用し、固定幅やフレックス、フレックス、最小値または最大値の組み合わせなど、列の幅を指定できます。会社名、コード、カチッキ、業界、業界に列コンポーネントを追加します。以下に示すように、新しいstocksgridクラスを作成します：

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

さあ、次のようにクラスアプリにstockgridを追加します：

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

GitHubでこのステップの前にコードを参照してください。 npmスタートで空のグリッドを使用してWebアプリケーションを表示できます。

グリッドを使用してExtreactのグリッドは、Ext Data Storeからデータを抽出およびレンダリングするテーブルです。 Extreactでは、ストレージ実装は、グリッドやリストやチャートなどのコンポーネントのデータを並べ替えてフィルタリングできるデータ構造です。

ストックデータのロードとストレージの作成を開始できるようになりました。同様に、グリッドは常にストレージからデータを取得し、グリッドとの相互作用は、リロード、ソート、ページングなどのストレージ上のイベントをトリガーします。これを行うために、ここでストレージを作成します。

extデータストレージはフラックスストレージとは異なります。メッシュとストレージを標準のReactメソッドとわずかに異なるものにしているのは、2つがしっかりと統合されていることです。通常、データをストレージに直接渡すことができます。または、ストレージがプロキシを使用して自体によってバックエンドからデータを抽出できます。 Extreact Gridを使用すると、実際にコードを作成せずにフィルタリング、ソート、ページング、グループ化、要約などのインタラクティブな機能を取得します。

この例では、株式データファイルからデータをストレージに直接渡します。プロキシ構成を使用してストレージを作成することもできます。プロキシを所有すると、リモートページング、フィルタリング、ソートなど、さまざまな優れたアクションを実行できます。 AutoLoadをTrueに設定して、グリッドを自動的にロードします。データは任意の基準で具体的にソートされていないため、名前属性を指定してクライアントに並べ替えます。

グリッドでは、作成されたストアにストア構成を割り当てます。

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

さて、次のようにすべてのデータを含むグリッドがあります：

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

このシンプルなコードを使用すると、ソートなど、多くの機能を無料で取得できます。これにより、列ヘッダーをクリックすると自動的にソートできます（以下のシンボリック列を参照）。

この場合、ソートはクライアント側で行われます。ただし、実際のバックエンドAPIを実装すると、バックグラウンドでリモートでソートするようにプロキシを構成し、「句ごとの順序」を使用してデータベースでソートすることができます。

resizable columnsを無料で入手することもできます。したがって、これらの列に幅を設定したとしても、ユーザーが何かを表示または閉じたい場合は、左右の列をドラッグすることでそれを行うことができます。

素晴らしいグループ化機能を取得することもできます。したがって、業界ごとにグループ化したい場合、この分野でグループをグループ化することができ、すべてのデータを業界の価値ごとにグループ化し、各グループをスクロールすると、固定タイトルが表示されます。

10,000レコードの場合、このデータが非常に高速になることに気付くでしょう。それが非常に高速にレンダリングする理由は、バッファーレンダリングと呼ばれるものを使用するからです。したがって、このテーブルはいっぱいに見え、下にスクロールすることができますが、それは続けていますが、最初にロードされたときに「ビューポートの高さ」で実際に見られるよりも少し多くのコンテンツをレンダリングします。

下にスクロールすると、実際にセルの内容を新しいレコードに置き換えます。そのため、実際にはDOM要素を可能な限り保存し、DOMを小さく保ち、メモリの消費量を減らし、高性能を確保します。

GitHubでこのステップの前にコードを参照してください。

グリッドスタイルを設定

データを分析しやすくするためのグリッドをスタイリングする方法はいくつかあります。

細胞プロップを使用します

セルスタイルの制御方法を見てみましょう。名前を太字にすることができます - 最良の方法は、セルプロップを使用することです。セルは、セルの外観を制御する多くの構成を使用します。ここにスタイルの構成を追加し、フォント級は太字に等しいと言います。

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

ラインにボタンを追加

今、私たちは現実の世界にもっと適したことをします。クリックして左側の列の在庫の1つを購入できるボタンが必要だとします。これを行うには、列を追加することができます。今回は、DatainDexは、フィールド内の特定のアイテムやストア内のフィールドに対応していないため、追加しません。ボタン付きのウィジェットセルを追加します。いくつかのスタイルを行います - 循環アクションUIを追加するので、ボタンには循環アクションの外観があります：

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

私たちが使用する購入ハンドラーは非常に簡単です。 [購入]ボタンをクリックすると、ext.toastという仮定を使用します。これは、上部に小さなプロンプトメッセージが表示され、購入している在庫のコードが表示されます。同様に、各行がレンダリングされる列をレンダリングします。このボタンをレンダリングし、クリックすると、この関数を呼び出します：

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

この例から、基本的にグリッドセル内に任意のエクストリーコンポーネントを埋め込み、完全にインタラクティブであることがわかります。完全な反応コンポーネントとして機能します。

GitHubでこのステップの前にコードを参照してください。

トレンドスパークラインチャートを追加

在庫データには、最後の5つの株式販売のティックアレイがあります。スパーク折りのグラフとしてグリッドに埋め込みましょう。 WidgetCellを使用して、グリッドセル内の脱出コンポーネントをレンダリングします。

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

マウスを使用してオンライングラフで異なるポイント上にホバーすると、2つの小数点以下の場所としてフォーマットされたY値が表示されます。

GitHubでのこのステップの前にコードを参照してください。

データをExcel

にエクスポートします

データ集約型アプリケーションの一般的な要件の1つは、データをエクスポートしてExcelです。 ExtreActは、グリッドのプラグインプロップを使用することにより、これを簡単に実現できます。

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

エクスポート機能への呼び出しを容易にするために、コンポーネントを追加します。タイトルバーを追加し、グリッドの上部にタイトルバーをドックし、その中にメニューを配置します。 [エクスポート]ボタンをクリックすると、ExcelまたはCSVにエクスポートするオプションがあります。

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

エクスポートハンドラーはエクスポートタイプとファイル名拡張機能を渡します：

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

exporterを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>

Exportプラグインは、データのエクスポートをさまざまなファイル形式にサポートしています。ネイティブXSLX、Excel XML、およびHTMLおよびCSV/TSV（Comma/Tab分離値）形式をサポートします。

GitHubでのこのステップの前にコードを参照してください。

グリッドに編集を追加

データの編集機能を追加することにより、グリッドをスプレッドシートのようにすることができます。この機能を追加するには、Gridcelleditingという別のプラグインを追加する必要があります。このプラグインを追加し、編集可能な列を編集可能なものとしてマークすることにより、グリッドセルをダブルクリックすることで編集できるグリッドデータができました。グリッドセルのタブキーを押して、グリッドの編集を続けることができます。

グリッドセル編集プラグインを追加：

<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と呼ばれる別のExherctコンポーネントを使用して実行できます。目的の列にselectfieldの押し出しコンポーネントを追加するだけです。

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

GitHubでのこのステップの前にコードを参照してください。

クロスプラットフォームエクスペリエンスを最適化

これはデスクトップのエクスペリエンスに最適ですが、携帯電話エクスペリエンスの画面サイズを最小限に抑える場合、セルの編集は最高の編集体験ではないかもしれません。小さな画面デバイスの場合、別の編集スタイルを選択する必要がある場合があります。

PlatformConfigオプションを使用すると、デスクトップまたはモバイルデバイスの動作を指定できます。 PlatformConfigに従って、任意のプロップを別の値に設定できます。ここでは、プラットフォームに従ってプラグインを設定します。この例では、アプリケーションがデスクトップ上にある場合、グリッドセレディティングを使用します。アプリがモバイルデバイスにある場合、GridDableを使用します。これは、モバイルデバイスでデータを編集するためのより良い方法を提供します。

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

GitHubでこのステップの前にコードを参照してください。

Extreact 6.6グリッドを使用して、React 16を使用してデータ駆動型Webアプリケーションにスプレッドシートのようなインターフェイスを簡単に追加できます。 Extreactを使用すると、メッシュ、ツリーメッシュ、パースペクティブメッシュ、チャート、D3の視覚化など、メッシュ、ツリーメッシュ、パースペクティブメッシュ、D3の視覚化など、任意のエクステストJS最新コンポーネントを使用できます。カスタマイズは必要ありません。アプリケーションで使用するコンポーネントのみを含む最適化された最小化パッケージを構築できます。デスクトップデバイスとモバイルデバイスの両方で見栄えの良いレイアウトと適応設計機能を使用して、没入型ユーザーエンゲージメントを構築できます。リマインダーとして、今すぐExtreactの30日間の試用版の無料トライアルを開始できます。こちらからサインアップしてください。

shenchaグリッドとは何ですか？また、React 16とどのように統合されますか？

Senchaグリッドは、大量のデータを処理するように設計された高性能グリッドコンポーネントです。ユーザーインターフェイスを構築するための人気のJavaScriptライブラリであるReact 16とシームレスに統合します。この統合により、開発者は、データの並べ替え、フィルタリング、グループ化、編集など、Reactのコンポーネントベースのアーキテクチャの力とSenchaグリッドのパワーを活用できます。この組み合わせは、複雑なWebアプリケーションを構築するための強力なツールを提供します。

私のReact 16アプリケーションでSencha Gridを始めるにはどうすればよいですか？

最初に、NPM（node.jsのパッケージマネージャー）を使用してSenchaグリッドパッケージをインストールする必要があります。インストールしたら、SenchaグリッドコンポーネントをReactアプリケーションにインポートし、他のReactコンポーネントと同じように使用できます。 Senchaグリッドコンポーネントは、動作と外観をカスタマイズするために使用できるさまざまな小道具を提供します。

他のJavaScriptフレームワークまたはライブラリでSenchaグリッドを使用できますか？

はい、Sencha Gridのデザインはフレームワークフリーです。つまり、JavaScriptフレームワークまたはライブラリで使用できます。ただし、ReactとSenchaグリッドの両方にコンポーネントベースの機能があるため、React 16との統合は特にシームレスです。

Sencha Gridの重要な機能は何ですか？

Sencha Gridは幅広い機能を提供し、大量のデータを表示および操作するための強力なツールになります。これらの機能には、データの並べ替え、フィルタリング、グループ化、編集、および無限のスクロール、行エクステンダー、列ロックなどの高度な機能が含まれます。グリッドは、さまざまなデータ型と形式もサポートしており、アプリケーションのニーズに合わせて簡単にカスタマイズできます。

Senchaグリッドは大量のデータをどのように処理しますか？

Senchaグリッドは、大量のデータを効率的に処理するように設計されています。ビューポートで現在表示されている行のみをレンダリングする仮想スクロールメカニズムを使用します。これは、グリッドに数千または数百万の列がある場合でも、パフォーマンスが依然として高く、ユーザーエクスペリエンスがスムーズであることを意味します。

sencyaグリッドの外観をカスタマイズできますか？

はい、Sencha Gridは、外観をカスタマイズするためのさまざまなオプションを提供しています。 CSSを使用して色、フォント、その他のスタイルを変更することもできます。また、その広範なAPIを使用して、グリッドのレイアウトと動作をカスタマイズすることもできます。

Sencha Gridは、ユーザーのインタラクションの処理に耳を傾けることができるさまざまなイベントを提供します。これらのイベントには、イベントのクリック、イベントの選択、イベントの編集などが含まれます。これらのイベントを聞くことで、アプリケーションに複雑な動作と相互作用を実装できます。

商用アプリケーションでSenchaグリッドを使用できますか？

はい、Sencha Gridは、商業用アプリケーションと非営利アプリケーションの両方で利用できます。ただし、商業用に使用するには、Senchaからライセンスを購入する必要があります。

Sencha Gridは、データを更新するさまざまな方法を提供します。データセット全体または単一の行またはセルを更新できます。データが更新されると、グリッドは影響を受けた行またはセルを自動的にレンダーします。

Sencha Gridはどのようなサポートを提供していますか？

Senchaは、Sencha Gridに包括的なドキュメントとチュートリアルを提供し、他の開発者と質問をして知識を共有できるコミュニティフォーラムを提供します。さらに、Senchaは、追加のヘルプまたはガイダンスが必要なクライアントに専門的なサポートとコンサルティングサービスを提供しています。

以上がSenchaグリッドで16のWebアプリを反応する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。