Ext JS 8.0の新機能

Ext JS 8.0リリース

Senchaチームは、Sencha Ext JS 8.0の提供を開始しました。このメジャーリリースでは、140以上のUIコンポーネントを統合した業界をリードするJavaScriptフレームワークに、最新の機能強化、パフォーマンス向上、新しい機能の搭載が施されています。

今回のリリースでは、お客様からご要望の多かった機能、すなわち、ビルトイン署名キャプチャ機能、QRコードワークフロー、大規模データセット向け高速グリッド、そしてすべてのツールキットでのモダンアイコンのサポートを提供しています。しかも、完全な下位互換性を維持しており、コードの書き換えは不要です。

メジャーバージョンアップは、大規模な非互換の変更やアプリケーションの書き換えを伴うものではありません。

以下に、新機能のすべてと、それがお客様のアプリケーションにどのような影響を与えるかを説明します。

無料トライアル版のダウンロード

最高クラスのExt JSデータグリッドをさらに強化することは、現代のアプリケーションの基盤であり、Ext JS 8.0では、グリッドのパフォーマンスと機能を大幅に向上させました。

Ext JS 8.0の製品ハイライト

今回のリリースでは、Sencha Upvoteリストから最も要望の多かった機能を搭載するとともに、シームレスなアップグレードのための下位互換性の維持も実現しています。

• 新しいレスポンシブなデジタル署名パッド（ClassicおよびModernツールキット）を使用して、アプリケーション内で直接文書に署名可能
• 新しいQRコードリーダー＆ジェネレーター（ClassicおよびModernツールキット）で、決済、小売、物流など、あらゆる分野でQRコードワークフローを実現
• Font Awesome 7 を介して最新のアイコンにアクセス — FA5との完全な下位互換性を提供
• Gridのパフォーマンス強化と水平バッファリング（Modernツールキット）を使用して、大規模かつ横幅のあるデータセットをより高速にレンダリング
• 新しいロック可能Gridプラグイン（Modernツールキット）を使用して、レポートスタイルのビューで列を固定可能
• ES2025まで対応したECMAScriptサポート強化により、最新のJavaScriptを確実に記述可能
• ARIAアクセシビリティサポート（Modernツールキット）を使用して、より包括的なアプリケーションを構築
• ReExtも最新のExt JSバージョンを利用可能 — ReExt 1.2はExt JS 8.0を完全サポート

ECMAScriptサポート範囲を拡大

Sencha CmdとExtGen 8.0.0は、ES2025までECMAScriptのサポートを拡張し、Ext JSアプリケーション内でlet、const、arrow関数などの最新のJavaScript機能をより広く採用できるようなりました。

Closure Compilerパースのアップデートを含むコンパイラの機能強化により、最新のJavaScript標準への整合性を向上、ビルド信頼性を高めます。これらのアップデートは、チームがコードベースをより効率的に最新化し、ポリフィルへの依存度を減らし、定型コードを最小限に抑え、よりクリーンな長期的なアプリケーションアーキテクチャをサポートするのに役立ちます。

"language": {
    "js": {
        "input": "UNSTABLE", // New feature, accepts latest syntax for compiling
        "output": "ANY" // The following will accept syntax and disable the transpiler.
    }
}

詳細については、言語トランスパイラのドキュメントを参照してください。

レスポンシブなデジタル署名パッド

サードパーティ製のライブラリを用いることなく、アプリ内で直接書類に署名可能に

スムーズでレスポンシブな署名キャプチャを実現する、まったく新しいアドオンコンポーネントが、両方のツールキットで利用可能になりました。ネイティブExt JSコンポーネントを拡張して構築されたSignature Padは、Grid、Form、Panelコンテナとシームレスに統合され、Ext JSコンフィグ、イベント、メソッド、プロパティ、そして変数やミックスインを通じてテーマ設定を完全にサポートしています。

このコンポーネントには、豊富な機能が搭載されています。「元に戻す/やり直し」機能、アクションのクリア、ペン幅とサイズの設定、背景色の選択、カラーピッカーなどを搭載。JPG、PNG、SVGなどの複数のエクスポート形式にも対応しています。プレビュー、タイトル、署名のプレースホルダーも備えており、快適な操作性を実現しています。

承認ワークフロー、オンボーディングフォーム、コンプライアンス承認、またはフィールドサービスアプリケーションを構築するチームは、サードパーティコンポーネントの統合不要で、Ext JSアプリケーション内で署名キャプチャをサポートでき、JPG、PNG、またはSVG形式で直接エクスポートできるようになりました。

{
    xtype: 'signature',
    penColor: '#000',
    penStrokeWidth: 2,
    minStrokeRatio: 0.7,
    listeners: {
        beginStroke: function(cmp) {
            console.log('Signature beginStroke:', cmp);
        },
        endStroke: function(cmp) {
            console.log('Signature endStroke:', cmp);
        }
    }
}

また、最新の機能にアクセスし、今後のアップグレードをスムーズに行うために、Signature Padライブラリをセルフアップグレードするための手順も説明しています。

QRコードリーダー＆ジェネレーター

決済、物流、小売など、あらゆる分野でQRコードワークフローを有効化する機能が、標準機能として組み込まれました。

Ext JSでは、ModernおよびClassicツールキットの両方に対応した、強力なQRコードリーダー／ジェネレーターコンポーネントを提供します。このコンポーネントを用いることで、開発者はアプリケーション内でQRコードを簡単に生成／読み取り可能になり、決済、データ共有、連絡先交換など、さまざまなユースケースに対応できます。

一般的なユースケースとしては、小売業における支払い確認、物流・輸送における資産追跡、イベントにおける連絡先共有、Wi-Fiプロビジョニング、カレンダーへの招待などが挙げられます。これらはすべて、外部依存なしにExt JSアプリケーション内でネイティブに処理されます。

このコンポーネントは、URL、テキスト、VCARD/MeCard、カレンダーイベント、位置情報、電話とSMS、メール、Wi-Fi設定、支払いデータに対応したQRコードの生成／読み取りのための包括的なAPIを提供します。レンダリングオプションには、SVG、Canvas、PNGがあり、画像としてダウンロードしたり、データをクリップボードにコピーしたり、保存前にプレビューしたりできます。

カスタマイズオプションでは、前景色と背景色のカスタマイズ、柔軟なサイズ制御、デスクトップとモバイルに対応したレスポンシブUI、セキュリティのための入力サニタイズなどが可能です。

{
    xtype: 'qrcode',
    padding: 20,
    type: 'email',
    data: {
        email: '[email protected]',
        subject: 'QR code generation example',
        body: 'QR code generated through Sencha'
    },
    listeners: {
        qrgenerated: function(QRCodeClassInstance, dataPassed) {
            console.log("QR Code Generated");
        }
    }
}

これらの機能を実際に体験してみませんか？

Ext JS 8.0の無料トライアル版をダウンロードして、KitchenSinkのすべての新機能を体験ください。

• 無料トライアル版をダウンロード
• KitchenSinkサンプルを見る

水平バッファリングを備えたバッファレンダラー

パフォーマンスを損なうことなく、1,000列以上の表示を実現

最新のツールキットには、大規模データセット向けに列仮想化機能を備えた改良版グリッドレンダリング機能が搭載されました。この機能強化により、表示可能なセルと設定可能なバッファ領域のみがレンダリングされるため、1000列以上のグリッドのパフォーマンスが大幅に向上します。

バッファリングされた列レンダリングは、行と列のロック、グループ化、フィルタリング、編集、アクセシビリティ機能、RTLサポート、およびすべてのテーマとシームレスに連携します。強化されたスクロール機能は、極めて列数の多いグリッドも効率的に処理します。

Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
    store: store,
    bufferedColumns: true, // Enable virtual column rendering
    columns: [
        { text: 'Name', dataIndex: 'name', width: 200 },
        { text: 'Email', dataIndex: 'email', width: 250 },
        { text: 'Phone', dataIndex: 'phone', width: 120 }
    ],
    height: 200,
    layout: 'fit',
    fullscreen: true
});

Modernツールキット用の新しいロック可能なGridプラグイン

レポート形式ビューで列をロックする機能をモダンツールキットに標準搭載

Modernツールキット向けに、完全にロック可能なグリッド機能を提供する新しいロック可能Gridプラグインが導入されました。このプラグインは、使いやすさ、設定の容易さ、そして柔軟なカスタマイズ性を考慮して設計されています。

このプラグインは、Modern Gridに列のロック／解除機能をネイティブ実装し、ロックされた領域と通常の領域間で水平方向と垂直方向のスクロールを同期させます。また、選択モデル、セル編集、集計、その他のグリッド機能との完全な互換性を維持します。

{
    xtype: 'grid',
    plugins: [{
        type: 'lockable'
    }],
    store: myStore,
    columns: [{
        text: 'ID',
        dataIndex: 'id',
        locked: true
    }, {
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email'
    }]
}

Font Awesome 7 のサポート

すべてのツールキットに最新アイコンを採用。FA5の設定との互換性も維持

Ext JS 8.0では、ModernとClassicの両方のツールキットで、Font Awesome 7.xがデフォルトのアイコンセットとして同梱されるようになりました。フレームワークは、一貫性を保つために公式のFA7 Webサイトのチートシートに準拠しており、ドキュメントには、開発者が新しいアイコンセットを効果的に活用するための包括的なガイダンスが含まれています。

// Using FA7 icons in your components
{    
    xtype: 'button',
    iconCls: 'fa-solid fa-rocket',
    text: 'Launch'
}

ダイアログ境界制御

コンテナを尊重するダイアログ ― ビューポートからのはみ出しを抑止

Ext.Dialog は、境界を考慮した最大化、最小化、およびドラッグ操作をサポートするようになりました。ダイアログは、デフォルトでビューポート全体を使用するのではなく、親コンテナまたはパネルの境界を尊重するようになりました。

constrainDragとmaximizable の両方の設定に新しいowner値が追加され、開発者はダイアログの動作をオーナーコンポーネントの境界内に制限できるようになりました。ダイアログがフローティング表示されていても、最大化、最小化、またはドラッグされた際に、親コンテナの境界を適切に尊重します。

Ext.create({
    xtype: 'panel',
    title: 'Parent Container',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'dialog',
        title: 'Dialog',
        closable: true,
        modal: false,
        constrainDrag: 'owner',
        maximizable: 'owner',
        bodyPadding: 30,
        maxWidth: 300,
        html: 'This dialog respects its parent container boundaries.'
    }]
});

アクセシビリティ：ARIAフィールドのサポート

追加設定なしでアクセシブルなアプリケーションを構築

最新のツールキットには、フォームフィールドとトリガーに対する完全なARIAサポートが追加されました。レンダリング時に適切なARIAプロパティとロールが適用されるため、JAWS、Narrator、TalkBack、VoiceOverなどのスクリーンリーダーとの互換性が確保されます。

今回の機能強化は、Ext JSアプリケーションをすべてのユーザーが利用できるようにするために進めている継続的な取り組みの一環です。

TreePanel用の3つの状態を保持するチェックボックス

マテリアルデザインに合致するよりスマートなツリー選択機能 ― 設定を1行追加するだけで有効化

ClassicツールキットのTreePanelチェックボックスは、チェック済み、未チェック、未確定の3つの状態をサポートするようになりました。親ノードは子ノードの集合状態を自動的に反映し、マテリアルデザインのパターンとアクセシビリティの要件を満たします。

この機能を有効にするには、開発者の手間は最小限で済みます。設定ファイルでenableTri: trueを設定するだけで、イベントの変更は一切不要です。

Ext.create('Ext.tree.Panel', {
    title: 'Tri-State Tree Example',
    width: 400,
    height: 300,
    rootVisible: false,
    renderTo: Ext.getBody(),
    enableTri: true,
    checkable: true,
    checkOnTriTap: false,
    store: {
        root: {
            expanded: true,
            children: [{
                text: 'Parent Node',
                expanded: true,
                children: [
                    { text: 'Child 1', leaf: true, checked: true },
                    { text: 'Child 2', leaf: true, checked: false }
                ]
            }]
        }
    }
});

ReExt 1.2

ReExtは、Reactと強力なExt JSフレームワーク間のブリッジとなり、開発者はExt JSの140種類を超えるUIコンポーネントの豊富なライブラリを活用して、堅牢で高性能なWebアプリケーションを構築できます。これには、強力なデータグリッド、ツリー、チャート、カレンダー、D3などが含まれます。ReExt 1.2は、最新のExt JSバージョン8.0をシームレスにサポートします。

バージョンサポート

Sencha Upgrade Advisor v8.0、Sencha Architect v4.3.8、Sencha Themer v1.4.6、ReExt 1.2.0、およびRapid Ext JS 1.2.0において、Ext JS 8.0のサポートが提供されています。サポートポータルにアクセスして、最新バージョンをダウンロードしてください。

世界中の企業チームから信頼されています

Ext JS 8.0は、Morgan Stanley、Hitachi Energy、Blue Yonder、Citigroup、Motorola Solutions、 BMW Groupなど、多くの企業で既に利用いただいています。アップグレードを検討しているチームは、ぜひお問い合わせください。

問い合わせ先

まとめ

今回、Ext JS 8.0がリリースされました。無料トライアル版をダウンロードし、KitchenSinkサンプルをご確認ください。4月15日（米国時間）には、新機能ウェビナーも実施されます。皆様からのフィードバックや機能リクエストはいつでも歓迎いたします。皆様から声は、製品の継続的な改善に大きく貢献しますので、ぜひご意見をお寄せください。

変更履歴については、こちらのドキュメントをご覧ください。

Ext JS
CMD

Ext JS 8.0をお試しください

最新リリースについての詳細は、以下の情報をご確認ください。

• Ext JS 8.0 30日間無料トライアル版をダウンロード
• Getting Started Guideを参照する
• Resource Centerを確認する
• KitchenSinkサンプルを確認する

アップデートについては、X（旧Twitter） や Youtube チャンネル （日本語はこちら：X（旧Twitter）、Youtubeチャンネル）をご覧ください。ぜひ、新バージョンでよりよいアプリの開発に取り組んでください。

バージョン8.0にアップグレードするには

無料のExt JS Upgrade Adviserツールを用いれば、最新のExt JSバージョンに移行する際に必要となるコード修正箇所を容易に特定することができます。ぜひ、お試しください。

Sencha Discord サーバーに参加する

Senchaコミュニティへの参加を検討している方は、数多くのExt JS エキスパートによるアドバイスやナレッジの共有が可能なSencha Discord Serverにご参加ください。参加は無料。ぜひ、コミュニティメンバーに加わってください。

• Sencha MVPが参加
• Senchaの開発者が数多く参加
• Sencha製品に関する理解、啓蒙を促進
• コミュニティへの参加、貢献が可能
• その他数多くのメリットが…