Sencha Ext JS 7.7 is Here – Discover What’s New and Exciting – LEARN MORE

Ext JS Data Gridをすばやくカスタマイズする方法(part 1/6)

March 10, 2020 187 Views
Show

Ext JS Data Gridは、高速で強力かつ柔軟に利用できます。Ext JSを使用すると、ユーザーは自分のアプリケーションに合わせてグリッドの外観をすばやくカスタマイズできます。全6回構成のブログシリーズでExt JS Data Gridをカスタマイズするさまざまな方法をカバーします。

ここではNBA 2020プレーヤーの評価を表示する単純なグリッドを作成します。

最初のブログ記事では、GridとColumnに予め用意されているプロパティを使ったデモを用いて説明します

 

Ext JS Grid のセットアップ

最初に定義するのはExt.data.Modelです。これは基本的にデータのタイプを表すフィールドのコレクションです。ここでは ‘player’, ‘team’, ‘rating’ のフィールドを定義しています。

Ext.define('Player', {
    extend: 'Ext.data.Model',
    fields: ['player', 'team', {
        name: 'rating',
        type: 'int'
    }]
});

次にExt.data.Storeをセットアップします。これはユーザインスタンスを含みます。この例は個々のデータをStoreに直接記述して静的な情報として定義していますが、実際のアプリケーションでは、データをサーバーからロードすることもできます。この操作は Ext.data.proxy.Proxy を用いて容易に行えます。

ここでは ’player’, ’team’. ‘rating’ として扱うデータを保持しています。

 

 var store = Ext.create('Ext.data.Store', {
    model: 'Player',
    data: [{
        player: 'Kemba Walker',
        team: 'Boston Celtics',
        rating: 88
    }, {
        player: 'Josh Richardson',
        team: 'Philadelphia 76ers',
        rating: 79
    }]
});

データの表示は Ext.grid.Panel を使用し、必要なカスタマイズを行います。

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    title: 'NBA 2K20 player rating',
    //使用するストアの定義
    store: store,
    columns: [{
        dataIndex: 'player',
        text: 'Name',
    }, {
        dataIndex: 'rating',
        text: 'Rating',
    }, {
        dataIndex: 'team',
        text: 'Team',
    }]
});

GridとColumnのプロパティをカスタマイズする

先程作成したGridはカスタマイズを行っておらず、魅力的なものとは感じられません。そこでGridの機能をより使いやすくカスタマイズする際に使用できる一般的なプロパティを次に示します。

Gridのプロパティ:

  • collapsible:Gridのヘッダに配置されたアイコンで展開/折りたたみ操作を可能にする
  • headerBorders [Classic]:Gridの境界線の表示、非表示を設定する
  • selModel [Classic]:Gridに表示したデータの選択方法の設定
  • hideHeaders:Columnのヘッダを非表示にする
  • title:Columnのタイトルバーにタイトルを表示する
  • width, height:Gridの幅と高さを指定する
  • store:表示されるデータが含まれるStoreを指定する

Column のプロパティ:

  • dataIndex : Modelのフィールド名を指定する
  • textColumnヘッダーのテキストを設定する
  • locked特定のColumnを固定表示する
  • sortableColumnのソートを許可する
  • widthColumnの幅を調整する
  • flexColumnのflexを調整する
  • alignColumnの整列方法を調整する

simple-grid

Ext.create('Ext.grid.Panel', {
  renderTo: document.body,
  title: 'NBA 2K20 player rating',
  //グリッドパネルの折り畳み/展開を有効にする
  collapsible: true,
  //ヘッダの境界線を表示
  headerBorders: true,
  //使用するストアの定義
  store: store,
  columns: [{
    dataIndex: 'player',
    text: 'Name',
    //このカラムを固定表示する
    locked: true,
    width: 150,
    //カラムのソート機能を無効化
    sortable: false
  }, {
    dataIndex: 'rating',
    text: 'Rating',
    flex: 1
  }, {
    dataIndex: 'team',
    text: 'Team',
    flex: 1,
    //カラムのソート機能を無効化
    sortable: false
  }]
});

このコードをFiddle Toolで確認して実行する

その他のコンフィグやプロパティについては Ext JS GridPanel のドキュメントをお読みください。

次回のブログ記事ではGridに「グループ化」機能を追加するカスタマイズ方法を説明します。ご期待ください。

Part2の記事を読む

Ext JS 7.1でデータグリッドを作成する

Ext JS 7.1の30日間無料トライアルは、製品の全ての機能にアクセスできます、アプリケーションに高性能なデータグリッドを作成する方法をお読みいただき、Get Started のドキュメントから始めましょう!

Recommended Articles

Ext JS Data Gridをすばやくカスタマイズする方法(part 2/6)

全6回構成の「Ext JS Data Gridカスタマイズ」ブログシリーズの最初の記事では、GridやColumnのプロパティをカスタマイズしてデータグリッドを外観や機能を変更する方法を説明しました。この記事ではデータ表示用のメソッドグリッドを用いてデータグリッドをすばやくカスタマイズする方法を説明します。

Sencha Ext JS 7.1およびツールの提供開始のお知らせ

Ext JS、ExtAngular、ExtReact、ExtWebComponents、およびツールのバージョン7.1を提供開始いたしました。この記事ではバージョン7.1の改善点について紹介します。

Sencha 2019/2020 ロードマップアップデート

少し前にSenchaのロードマップをご案内しました。これについてお客様から素晴らしいフィードバックをいただいており、2019/2020ロードマップにそれらの提案を取り入れたいと思います。

今秋のアップデート – Senchaジェネラルマネージャのデスクから

前回Senchaコミュニティに情報発信してから、数週間が経ちました。私たちのプライオリティと製品ロードマップは、お客様の声によって形成されており、皆さんがすばらしいアプリケーションを構築できるような価値ある製品強化を提供していきたいと考えています。今回、いくつかの進行中の開発状況に関して紹介するとともに、コミュニティの皆さんにアップデートを提供したいと思います。

コンポーネントファーストのアプローチでアプリ開発をスピードアップ

開発者は、アプリケーションを構築し、迅速かつ効率的に市場に投入するために、再利用可能かつポータブルなコードに長い間依存してきました。コンポーネントベースの開発は、ReactやAngularなどの人気のあるフロントエンドフレームワークの多くで開発されたアプリケーションのホームを見つけてきた、JavaScriptの現代の進化を通じて人気を維持しています。

Sencha ロードマップ アップデート – 2019年9月

Senchaロードマップのアップデートを共有できることを嬉しく思います。私がGMとして参加してからの半年間、私たちのコアチームはSenchaを明確な成長軌道に載せるために一生懸命取り組んできました。今年の4月にいくつかの計画を共有しましたが、すべての面で大きな進歩を遂げていることを喜んで報告します。

View More

coming soon

Something Awesome Is

COMING SOON!