Ext.js-質問と回答

Ext JSとは何ですか？

Ext JSは拡張JavaScriptの略です。リッチUI Webベースのデスクトップアプリケーションを開発するためのJavaScriptフレームワークです。

Ext JSはどのライブラリで拡張されますか？

YUI（Yahooユーザーインターフェイス）から拡張されたSencha製品です。

HTMLページに追加するメインライブラリファイルは何ですか？

これらは、Ext JSコードを実行するためにHTMLページに含める主なファイルです-

ext-all.js
ext-all.css

Ext JSの機能を説明します。

グリッド、ピボットグリッド、フォーム、チャート、ツリーなどの豊富なUIのコレクションを持つカスタマイズ可能なUIウィジェット。
古いバージョンと新しいバージョンのコードの互換性。
柔軟なレイアウトマネージャーは、複数のブラウザー、デバイス、および画面サイズにわたってデータとコンテンツの表示を整理するのに役立ちます。
Advanceデータパッケージは、UIウィジェットをデータレイヤーから分離します。データパッケージを使用すると、並べ替えやフィルタリングなどの機能を有効にする高機能モデルを使用して、クライアント側でデータを収集できます。
プロトコルに依存せず、任意のバックエンドソースからデータにアクセスできます。
カスタマイズ可能なテーマExt JSウィジェットは、プラットフォーム間で一貫した複数のすぐに使用可能なテーマで使用できます。

Ext JSを使用する利点を説明します。

最新のブラウザとレガシーブラウザの両方で、デスクトップ、タブレット、スマートフォンにわたるクロスプラットフォーム開発を合理化します。
IDEプラグインを介してエンタープライズ開発環境に統合することにより、開発チームの生産性が向上します。
Webアプリケーション開発のコストを削減します。
チームが魅力的なユーザーエクスペリエンスを備えたアプリを作成できるようにします。
UIを強力かつ簡単にするための一連のウィジェットがあります。
MVCアーキテクチャに準拠しているため、コードが非常に読みやすくなります。

Ext JSの使用の制限について説明します。

ライブラリのサイズは約500 KBと大きいため、初期読み込み時間が長くなり、アプリケーションが遅くなります。
HTMLは<DIV>タグでいっぱいであるため、デバッグが複雑で困難になります。
一般的なパブリックライセンスポリシーによると、オープンソースアプリケーションの場合は無料ですが、商用アプリケーションの場合は有料です。
単純なものでさえロードするために、数行のコーディングが必要な場合がありますが、これはプレーンなhtmlまたはJqueryでより簡単です。
Ext JSアプリケーションの開発には、経験豊富な開発者が必要です。

Ext JSがサポートするブラウザーは何ですか？

Ext JSはクロスブラウザの互換性をサポートし、すべての主要なブラウザを次のようにサポートします-

IE 6以降
Firefox 3.6以降
Chrome10以降
Safari 4以降
Opera 11以降

Ext JSはどのアーキテクチャをサポートしていますか？

Ext JS 4+は、MVC（Model View Controller）アーキテクチャをサポートしています。 Ext JS 5からMVVM（Model View Viewmodel）のサポートも開始しました。

Ext JSの最新バージョンとその利点は何ですか？

Ext JS 6は、Ext JSの最新バージョンであり、デスクトップアプリケーションとモバイルアプリケーションの両方で使用できるという大きな利点があります。基本的には、Ext JS（デスクトップアプリケーション）とSencha touch（モバイルアプリケーション）のマージです。

初めて使用する開発者へのアドバイス。

Ext JSはJavaScriptフレームワークであるため、使用を開始するには、HTMLとJSの予備知識が必要です（エキスパートレベルではなく、基本的な理解が必要です）。その後、基本を理解するために時間がかかるので、徐々に学習してください。

Ext JSとjQueryの違い。

Ext JSは本格的なUIリッチフレームワークであるため、両方のフレームワークはまったく異なり、Ext JSとjQuery UIを比較できます。ただし、Ext JSにはjQuery UIよりもはるかに多くのコンポーネントがあります。

Ext JSとAngular JSの違い。

Parameter	Ext JS	Angular JS
Rich UI	Ext JS provides rich UI options such as forms , grid, charts	Angular JS does not provide rich UI inbuilt
Rich theme UI components	Ext JS provides multiple themes inbuilt	Angular JS does not provide Rich UI it has to be integrated with AngularUI, AngularBootstarp etc.
Cross browser compatibility	Ext JS provide cross browser compatibility it works for almost all the browsers IE6+, FF, Chrome, Safari, Opera etc.	Angular JS has to use third party library such as jQuery, jqLite for solving this purpose.
Automatic testing support	Possible only with external tools	Provides inbuilt.
Two way data binding	In Ext JS 5 two way binding is included.	It supports two way binding start from first version.
Performance	Ext JS is comparatively heavier and slower.	Angular JS is light weight framework than Ext JS
Build tools	Ext JS uses Sencha cmd tool for builds	Angular JS uses third party tools such as grunt.

Ext JSのさまざまなバージョンについて何を知っていますか？

*Ext JS 1.1*

Ext JSの最初のバージョンは、2006年にJack Slocumによって開発されました。 YUIの拡張であるユーティリティクラスのセットでした。彼はライブラリをYUI-extと名付けました。

*Ext JS 2.0*

Ext JSバージョン2.0は2007年にリリースされました。このバージョンには、機能が制限されたデスクトップアプリケーション用の新しいAPIドキュメントがありました。このバージョンには、Ext JSの以前のバージョンとの下位互換性がありませんでした。

*Ext JS 3.0*

Ext JSバージョン3.0は2009年にリリースされました。このバージョンでは、グラフおよびリストビューとして新しい機能が追加されましたが、速度が犠牲になりました。バージョン2.0との後方互換性がありました。

*Ext JS 4.0*

Ext JS 3のリリース後、Ext JSの開発者は速度を上げるという大きな課題を抱えていました。 Ext JSバージョン4.0は2011年にリリースされました。完全に改訂された構造で、MVCアーキテクチャと迅速なアプリケーションがそれに続きました。

*Ext JS 5.0*

Ext JSバージョン5.0は2014年にリリースされました。このリリースでの主な変更は、MVCアーキテクチャをMVVMアーキテクチャに変更することでした。タッチ対応デバイスでデスクトップアプリを構築する機能、双方向のデータバインディング、レスポンシブレイアウトなどの機能が含まれています。

*Ext JS 6.0*

Ext JS 6は、Ext JS（デスクトップアプリケーション用）とsencha touch（モバイルアプリケーション用）フレームワークをマージします。

異なるExt JSコンポーネントとは何ですか？

Ext JSにはさまざまなUIコンポーネントがあり、主に使用されるコンポーネントの一部は-

Grid
Form
メッセージボックス
プログレスバー
ツールチップ
窓
HTMLエディタ
チャート

Ext JSのxTypeとは何ですか？

xTypeは、Ext JS UIコンポーネントのタイプを定義します。これは、コンポーネントのレンダリング中に決定されます。 E.g. textField、数値、ボタンなど

Ext JSのvTypeとは何ですか？

これは検証タイプであり、簡単にカスタマイズできます。 Ext JSが提供するvTypeはほとんどありません-

*alphanumText* -入力されたテキストにアルファベットまたは数値以外の記号がある場合、これはfalseを返します。

*emailText* -テキストが有効なメールアドレスでない場合、これはfalseを返します。

Ext JSをAjaxと統合できますか？

はい、Ext JSはAjaxと統合できます。実装：ぼかし後のテキストボックスで、テキストボックスに入力されたデータがサーバー/データベースに存在するかどうかを確認するために、テキストボックスIDに対してonblur/onchangeを呼び出すAjax呼び出しを行うために、サーバーからのデータを検証する必要があるとします。

Ext JSは他のサーバー側フレームワークと統合できますか？

はい、Ext JSは、Java、.net、Ruby on rails、PHP、ColdFusionなど、他のサーバー側フレームワークと統合できます。

Ext JS実装ツールについて説明します。

Ext JSは、Eclipse、Aptana、Sublime、Webstromなどの一般的な統合開発環境（IDE）に実装できます。

Ext JSでDOM要素にアクセスする方法は何ですか？

これらは、Ext JSでDOM要素にアクセスするいくつかの方法です-

Ext.get（）
Ext.getElementById（）
Ext.fly（）
Ext.select（）

MVVMアーキテクチャのViewmodelとは何ですか？

MVVMアーキテクチャは、モデルビュービューモデルです。 MVVMアーキテクチャでは、MVCのコントローラーはViewModelに置き換えられます。

*ViewModel* -それは基本的にビューとモデルの間の変更を薬にします。 モデルのデータをビューにバインドします。 同時に、ビューとの直接的な相互作用はなく、モデルの知識しかありません。

ボタンクリックのリスナーを作成します。

Ext.getCmp('buttonId').on('click', function(){
//statement to perform logic
});

Ext.onReady（）の使用を説明します。

Ext.onReady（）は、DOMが完全に読み込まれたときに呼び出される最初のメソッドであり、スクリプトの実行時に参照したい要素が利用可能になります。

ページをクリックしたdiv要素のリスナーを作成します。

Ext.select('div').on('click', function(){
//statement to perform logic
});

Ext JSのアラートボックスにはどのような種類がありますか？

Ext JSのアラートボックスの種類は次のとおりです-

Ext.MessageBox.alert（）;
Ext.MessageBox.confirm（）;
Ext.MessageBox.wait（）;
Ext.MessageBox.promt（）;
Ext.MessageBox.show（）;

ストア、モデル、コントローラーの基本クラスは何ですか？

Storeの基本クラスはExt.data.Storeです

モデルの場合、Ext.data.Model

コントローラーの場合、Ext.app.controller

Ext JSでのイベント処理のさまざまな方法は何ですか？

これらは、イベント処理のさまざまな方法です-

リスナーの使用
後でイベントを添付する
カスタムイベントを使用する

ストアでレコードを取得しない方法は？

Store.getCount（）*-キャッシュされたレコード用
Store.getTotalCount（）*-DB内のレコードの合計なし。

ストアで変更されたレコードを取得する方法は？

Store.getModifiedRecords（）メソッドは、変更されたレコードを取得するために使用されます。

ストア内のレコードを更新する方法は？

ストアの変更を更新するStore.commitChanges（）メソッド。

インデックスを使用してストアレコードを取得する方法

グリッドIDがある場合：Ext.getCmp（ 'gridId'）。getStore（）。getAt（index）;

ストアIDがある場合：Ext.getStore（ 'storeId'）。getAt（index）;

ストアデータをロードする機能は何ですか？

Store.load（）;

フォーム、グリッド、チャート、パネル、ツリーの基本クラスを記述します。

グリッドの基本クラス-Ext.grid.GridPanel
フォームの場合– Ext.form.Panel
パネルの場合– Ext.panel.Panel
チャートの場合-Ext.chart.Chart
ツリーの場合– Ext.tree.Panel

Ext JSのレイアウトの種類は何ですか？

レイアウトの種類は次のとおりです-

絶対の
アコーディオン
アンカー
境界
Auto
hBox
vBox
カード（TabPanel）
カード（ウィザード）
カラム
Fit
表

グリッドにページネーションを適用する方法は？

これは、pagingToolbar（）を使用して行うことができます-

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
//trigger the data store load
store.load({params:{start:0, limit:25}});

ドッキングされたアイテムを追加する方法は？

dockedItems: [{
   xtype: 'toolbar',
   items: [{
      id:'buttonId',
      handler: function() {
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

ロードマスクとは何ですか？

Loadmaskは、データがグリッドにレンダリングされるまでユーザーに読み込み（またはカスタムメッセージ）を表示することにより、他の操作を防止するために使用されます。ロードマスク：true;データをグリッドにレンダリングする際にロードマスクを表示するプロパティです。

レンダラーとは何ですか？

レンダラーは、ストアから取得したデータを操作して、何らかの基準に基づいて操作されたデータを表示する場合に使用されます。それはとして使用できる列のプロパティです-

renderer: function(value, metadata, record, rowIndex, colIndex, store){
//logic to perform
}

Ext JSで要素の値を取得する方法は？

Ext.getCmp（ 'id'）。getValue（）;

グリッドで列を非表示にする方法は？

非表示：true;

グリッドでソートするためのプロパティは何ですか？

ソート可能：true;デフォルトはtrueです。

ストア内のロードイベントの前後に書き込む方法

grid.getStore().on ({
   beforeload : function(store) {
     //perform some operation
   },
   load : {
      fn : function(store) {
        //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6は、デスクトップアプリケーションとモバイルアプリケーションの両方にどのように使用できますか？

Ext JS 6には、両方のフレームワーク（Ext JSとSencha Touch）の視覚要素を含めることができるツールキットパッケージがあります。

次のように追加できます-

'toolkit'： 'classic'、//または 'modern'

ツールキットがクラシックの場合、Ext JSデスクトップアプリケーションフレームワークが含まれます。

また、ツールキットが最新の場合、sencha touchモバイルアプリケーションフレームワークが含まれています。

次は何ですか？

さらに、あなたが主題で行った過去の課題を通過し、それらについて自信を持って話すことができることを確認することができます。あなたがより新鮮であれば、インタビュアーはあなたが非常に複雑な質問に答えることを期待していません。むしろ、あなたはあなたの基本概念を非常に強くしなければなりません。

第二に、いくつかの質問に答えられなかったとしても、それは本当に重要ではありませんが、答えたものが何であれ、自信を持って答えたに違いないということは重要です。面接中は自信を持ってください。 finddevguidesで私たちはあなたに良い面接担当者がいれば幸運であり、あなたの将来の努力のためにすべてが最善であることを願っています。乾杯:-)

Extjs-qna

Ext.js-質問と回答

次は何ですか？