Ext.js でデータ バインディングを実装する方法: 実践的なチュートリアル

公開: 2023-09-21

Ext.js JavaScript Framework でデータ バインディングを機能させる方法に関する実践的なガイドへようこそ。 データ バインディングは、Web サイトの外観と Web サイト上で変更される内容を結び付ける魔法の接着剤のようなものです。 Ext.js JavaScript Framework は、これを簡単に行うのに役立つ優れたツールです。 このブログでは、プロセス全体を簡単な手順で説明します。 プロのコーダーであっても、初心者であっても、基本を説明します。

Web サイトがスムーズに反応して更新できるように、データを Ext.js JavaScript フレームワーク パーツにリンクする方法を学びます。 最終的には、Web アプリをよりインタラクティブかつダイナミックにするスキルを身につけることができます。 Ext.js データ バインディングを始めましょう。

データ

データバインディングとは何ですか?

データ バインディングは、Web サイトの外観と Web サイト上で変更される可能性のあるものとの間の役立つリンクのようなものです。 これは、Web サイトとデータのスムーズな連携を維持する魔法の接続であると想像してください。 そのため、価格や名前など、データに何か変更があった場合、ユーザーが何もしなくても、Web サイトにその変更が自動的に表示されます。

Web 開発者向けのツールキットである Ext.js には、双方向データ バインディングと呼ばれる優れた機能があります。 これは、Web サイト上でボタンをクリックしたり、ボックスに入力したりするなどの操作を行うと、データが更新されることを意味します。 データが変更されると、Web サイトが即座に更新されます。 これにより、Web サイトがよりインタラクティブで応答性の高いものになります。

Web 開発におけるデータ バインディングの重要性は何ですか?

データ バインディングは、すべてを手動で行うことなく、Web サイトの外観を変化するデータと確実に一致させるため、Web 開発において非常に重要です。 これにより、Web アプリやモバイル アプリがより動的で応答性が高くなり、開発者が複雑なコードを記述する時間と労力を節約できます。

Ext.js の双方向データ バインディング。

Ext JS と Sencha Touch のすべてのタイプのバインディングは、セッターとアップデーターを使用するおなじみのプロセスに従います。 一方向バインディングとは、ViewModel で何かが変更されると、セッターを使用して構成を更新することを意味します。 双方向バインディングは似ていますが、特別なハンドラーのようなアップデータを使用します。 アップデーターが構成を正常に変更すると、ViewModel 内のリンクされた値も変更され、他のバインディングが更新されます。

構成で双方向バインディングをサポートするには、「twoWayBindable」オプションを使用できます。 通常、これはバックグラウンドで使用されますが、カスタム ビューやコンポーネントを作成するときに便利です。 たとえば、Ext.field.Text は、次のように「値」を双方向バインド可能に設定します。

双方向バインド可能: {

値: 1

}

スピナー フィールドを使用した例では、値が変更されるとアップデーターがトリガーされ、ViewModel がそれをインターセプトします。 これにより、以下のコンテナのコンテンツが更新されます。これはすべて、「html」設定がリンクされているためです。 Ext.field.Spinner は Ext.field.Text に関連しており、その「値」の双方向バインディングで動作するように設定されているため、これはスムーズに機能します。

煎茶

開発環境に Ext.js をインストールしてセットアップするにはどうすればよいですか?

Ext JS ライブラリ ファイルの試用版を入手するには、Sencha の Web サイト (https://www.sencha.com) にアクセスしてください。 登録すると、試用版が「ext-6.0.1-trial」という名前の zip フォルダーとして電子メールで届きます。

フォルダーを解凍して、アプリケーションのさまざまな JavaScript ファイルと CSS ファイルを見つけます。 主要な JavaScript ファイルには次のものが含まれます。

  1. ext.js : すべてのアプリケーション機能を含むコア ファイル。
  2. ext-all.js : コメントなしの ext.js の縮小バージョン。
  3. ext-all-debug.js : デバッグ用の ext-all.js の縮小されていないバージョン。
  4. ext-all-dev.js : 別の非縮小バージョン。コメントやコンソール ログを使用した開発に役立ちます。
  5. ext-all.js : 実稼働対応の小型バージョン。

これらのファイルをプロジェクトの JS フォルダーに追加することも、システム上の直接パスを指定することもできます。 CSS の場合、テーマベースのファイルは、デスクトップ アプリケーションを構築しているかモバイル アプリケーションを構築しているかに応じて、さまざまなフォルダーで利用できます。

HTML ファイルで、必要な CSS ファイルと JavaScript ファイルにリンクします。 あるいは、コンテンツ配信ネットワーク (CDN) を使用して、ファイルをローカルにダウンロードすることを回避できます。 Ext JS は、IE 6 以降、Firefox、Chrome、Safari、Opera などのさまざまなブラウザと互換性があり、Web 開発に多用途に使用できます。

技術

単純な Ext.js アプリケーションを作成するには?

Ext JS アプリを迅速に作成するための簡単な手順は次のとおりです。

ステップ 1: npm からパッケージをインストールする

Ext JS は、パブリック npm レジストリで入手可能な 30 日間の試用版パッケージを提供しています。 次のコマンドを実行すると、最新の Ext JS バージョンを取得できます。

$ npm install -g @sencha/ext-gen

既存のユーザーの場合、Ext JS とその関連パッケージは Sencha のプライベート npm レジストリに存在します。 これにアクセスするには、レジストリにログインし、次のコマンドを使用して npm をインストールします。

$ npm ログイン –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

これらのコマンドは、「@sencha」スコープの下で Sencha のレジストリからパッケージを取得してインストールするように npm を設定します。

ステップ 2: アプリケーションの生成

このステップでは、次のコマンドを使用して、ホームページとグリッドを含む単純な 2 ビュー アプリを作成します。

ext-gen app -a -t moderndesktop -n ModernApp

ステップ 3: アプリを探索する

プロジェクトが生成されたので、次を使用してそのディレクトリに移動します。

cd ./modern-app

アプリを探索するには、次の npm コマンドを使用してアプリを開始します。

npmスタート

これらの手順は、無料でオープンソースの Ext JS アプリケーションのバックアップを迅速に設定するのに役立ちます。

Sencha: 優れた UI のパートナー – お問い合わせください!

Ext.js でモデルは何に使用されますか?

モデルは、アプリケーション内の一種のデータを表します。 モデルの中核は、一連のフィールドとそれに関連するデータで構成されます。 モデルは、フィールド、プロキシ、関連付け、検証という 4 つの主要な要素で構成されます。

田畑

モデル フィールドは、「fields」プロパティ内で配列として指定されます。 各フィールドは、名前やタイプなどの属性を含む JavaScript オブジェクトとして記述されます。

プロキシ

プロキシはストアで使用され、モデル データのロードと保存に関連するタスクを処理します。 プロキシには次の 2 種類があります。

  1. クライアント プロキシ。ブラウザのメモリまたはローカル ストレージをデータ ストレージに利用します。
  2. サーバー プロキシは、Ajax、JSON-P、REST などの方法を介してサーバーにデータを送信する役割を果たします。

協会

複数のモデルを含む小規模なアプリケーションであっても、モデルは相互に接続を確立できます。 1 対 1、1 対多、多対 1 の関係など、さまざまなタイプの関連付けを作成できます。

検証

検証は、特定のモデル フィールド内に格納されたデータの正確性を検証するために使用される特殊な構造です。 ExtJS は、一連の標準的な検証を提供します。一般的な例としては、フィールドの最小長または最大長のチェックが挙げられます。

Ext.js におけるビューの役割は何ですか?

ビューは、アプリケーションの視覚的な側面とユーザー インターフェイスを処理します。 ビューはコンポーネントとレイアウトで構成されます。 各コンポーネントは別のコンポーネントのコンテナとして機能し、ビューの階層的なコレクションとしてアプリケーション インターフェイスを構造化できます。

ExtJS では、さまざまなレイアウトが利用可能です。

  1. FitLayout:このレイアウトは、親コンテナーの境界に合わせて内部項目を拡張します。
  2. VBoxLayout:アイテムの垂直方向の配置を容易にします。
  3. HBoxLayout:項目を水平方向に配置しやすくします。
  4. BorderLayout:このレイアウトでは、項目をウィンドウの 4 つの側面の 1 つに添付したり、中央にドッキングしたりできます。

データベース

モデルとビュー間のデータ バインディングを設定するにはどうすればよいですか?

Ext.app.ViewModel クラスは、データ接続を確立するために重要です。 データオーガナイザーのようなものだと考えてください。 これは Ext.data.Model に似ていますが、単なる事実のリストではなく、家系図のような構造化された方法でデータを処理します。 また、この整理されたデータの変更を監視するための「bind()」メソッドもあります。

さて、このデータの家系図についてですが、これは家族内で知識が受け継がれる仕組みと少し似ています。 子どもは親から学び、親も親から学びます。 私たちの場合、「孫」コンポーネントでも上位レベルのコンポーネントから学習できます。 すべては情報を効果的に共有することです。

Ext JS でモデルとビュー間のデータ バインディングを設定するには、いくつかの重要な手順が必要です。

  1. モデルの作成: まず、操作したいデータ構造を表すモデルを定義します。このモデルには、ビューに表示する必要があるデータに対応するフィールドが含まれている必要があります。
  2. ViewModel を作成します。 ViewModel はモデルとビューの間の仲介者として機能します。データを管理し、データをビュー コンポーネントにバインドする方法を提供します。 コントローラーまたはビューで ViewModel を作成できます。
  3. データをコンポーネントにバインドする: ViewModel の 'bind' メソッドを使用して、モデルのフィールドをビュー内のコンポーネントに接続します。たとえば、人の名前を表示する必要があるテキスト フィールドがある場合、それをモデル内の対応するフィールドにバインドできます。

ビューモデル: {

数式: {

fullName: function(get) {

var firstName = get('user.firstName');

var lastName = get('user.lastName');

firstName + ' ' + lastName を返します。

}

}

}、

アイテム: [{

xtype: 'テキストフィールド',

フィールドラベル: '名',

バインド: '{user.firstName}'

}、{

xtype: 'テキストフィールド',

フィールドラベル: '姓',

バインド: '{user.lastName}'

}、{

xtype: 'テキストフィールド',

フィールドラベル: 'フルネーム',

binding: '{fullName}' // これは計算フィールドです

}]

「」

  1. データの更新: モデル内のデータを更新すると (ユーザーが新しい値を入力した場合など)、データ バインディング メカニズムによって接続されたビュー コンポーネントが自動的に更新されます。同様に、ユーザーがビュー コンポーネントを操作すると (フィールドの編集など)、変更がモデルに反映されます。

パソコンを使う男性

結論

Ext JS は、データと Web ページに表示される内容をリンクするスマートな方法を提供します。 モデルを設定し、それを Web ページ要素に接続することで、データがいつ変更されたかを確認できます。 さらに、Web ページは自動的に更新され、ユーザーが Web ページを操作すると、変更がデータに保存されます。

これにより、Web アプリの構築が容易になり、ユーザーのサイト エクスペリエンスが向上し、開発者が動的で応答性の高い Web アプリケーションを簡単に作成できるようになります。 Ext JS は HTML コードのプロセス全体を簡素化し、Web 開発をより効率的でユーザーフレンドリーなものにします。

よくある質問

Ext.js とは何ですか? データ バインディングに Ext.js を使用する理由は何ですか?

Ext JS は JavaScript フレームワークです。 データ バインディングを簡素化し、応答性の高い Web アプリケーションやモバイル アプリケーションを効率的に作成します。

Ext.js データ バインディングにはどのようなツールが必要ですか?

Ext.js データ バインディングを開始するには、Ext.js フレームワーク、コード エディター、および Web ブラウザーが必要です。

レスポンシブ Web デザインとは何ですか?

レスポンシブ Web デザインは、Web コンポーネントをさまざまな画面サイズに適応させ、デスクトップ、タブレット、モバイルで最適なユーザー エクスペリエンスを保証します。

JQuery は JS フレームワークですか?

いいえ、jQuery は JavaScript フレームワークではありません。 これは、DOM 操作と AJAX リクエストを簡素化するためのライブラリです。