エクストラユース

1. https://www.sencha.com下载Ext JS ライブラリファイル（または cdn 呼び出し使用）

2. Ext.onReady() メソッドを使用して呼び出され、オブジェクトは Ext.create() で作成され、Ext.Panel はパネルを作成するための Ext JS の事前定義クラス、 renderTo はこのパネルがレンダーする必要のある要素、 height と width のプロパティはパネルのカスタム寸法、 title のプロパティはパネルへのタイトル、 html のプロパティはパネルに表示する html 内容を指定します。

3. ext wrapped jsで要素を作成・追加し、作成されたものはコンポーネントとして使用でき、コンポーネントは他のコンポーネント（要素）の内部で使用できることが主な内容です。



いくつかの共通属性



layout：レイアウト item：コンポーネント名内 region：地域 （属性値は南東北西西中央南東北中央）



4. イベントトリガー：listenプロパティ内にイベントトリガー条件を追加し、関数を呼び出す。



5. Timer: defer Ext.defer(function() { button.fireEvent('myEvent'); }, 5000)。



6. http://www.360doc.com/content/10/1230/08/5272888_82525831.shtml

I. エレメントの取得（Getting Elements） 



1. Ext.get 



var el = Ext.get('myElementId');//document.getElementById('myElementId') に相当する要素を取得;//キャッシュされます。 



2. エクスト.フライ 



var el = Ext.fly('myElementId')// キャッシュは必要ありません。 



注）ヘドバン要素パターン（Flyweight Design Pattern）は、1つのプレナリーオブジェクトを作成し、それを繰り返し使用することで動作するメモリ節約型パターンであると推測される。 



3. Ext.getDom 



var elDom = Ext.getDom('elId'); // id に基づいて dom ノードを検索します。 



var elDom1 = Ext.getDom(elDom); // dom ノードに基づいて検索します。

II. CSS要素 



4. addClass 



Ext.fly('elId').addClass('myCls'); // 要素 'myCls' の様式を追加する。 



5.radioClass（ラジオクラス 



Ext.fly('elId').radioClass('myCls');// この要素に一つ以上のclassNameを追加し、同名のサイド（兄弟）ノードをすべて削除します。 



6. removeClass 



Ext.fly('elId').removeClass('myCls'); // 要素のスタイルを削除します。 



7. toggleClass 



Ext.fly('elId').toggleClass('myCls'); // スタイル追加 



Ext.fly('elId').toggleClass('myCls'); // スタイルを削除する。 



Ext.fly('elId').toggleClass('myCls'); // スタイルを再度追加します。 



8. hasClass 



if (Ext.fly('elId').hasClass('myCls')) {//このスタイルが追加されているかどうかを判断します。 



// スタイリングされている ....... 



} 



10.replaceClass 



Ext.fly('elId').replaceClass('myClsA', 'myClsB');//replaceStyleを指定します。 



11.getStyle 



var color = Ext.fly('elId').getStyle('color');// この要素に対して統一された現在のスタイルと計算されたスタイルを返します。 



var zIndx = Ext.fly('elId').getStyle('z-index');// この要素の統一された現在のスタイルと計算されたスタイルを返します。 



12.setStyle 



Ext.fly('elId').setStyle({... 



表示 : 'block', 



オーバーフロー : 'hidden', 



cursor : 'ポインター' 



});// 要素のスタイルを設定します。また、1 つのオブジェクト パラメータで複数のスタイルを含めることもできます。 



13. getColor 



Ext.fly('elId').getColor('color');// 指定されたCSSプロパティに対応するCSSカラーを返す 



14.setOpacity

Ext.fly('elId').setOpacity(.45, true);// 要素の透過性を設定します。 



15. クリアオパシティ 



Ext.fly('elId').clearOpacity();// この要素の透明度設定をクリアします。

III. ドムツアー 



16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red '); 



17.isは、現在の要素が入力されたセレクタに一致するかどうかをテストします。 



コピーコードのコードは以下の通りです。

var el = Ext.get('elId')。 



if (el.is('p.myCls')){。 



// 条件が成立している 



}

18.findParent 



このノードを見つけ、このノードから外側の親ノードを検索します。検索条件は一致し、入力される単純なセレクタと一致する必要があります。 



Ext.fly('elId').findParent('div'); // domノードを返す 



Ext.fly('elId').findParent('div', 4); // 4つのノードを見つける。 



Ext.fly('elId').findParent('div', null, true); // Ext.Elementを返す。 



19.findParentNode（ファインドペアレントノード 



このノードの "parent node" を見つけ、このノードの "parent node" から始まる外側の "parent" ノードを検索し、検索条件は入力される単純なセレクタと一致しなければなりません。 



Ext.fly('elId').findParentNode('div'); 



20.up 



DOMに沿って外側の "parent" ノードを検索し、入力された単純なセレクタに一致させます。 



Ext.fly('elId').up('div')。 



Ext.fly('elId').up('div', 5); // 内部のルックアップは5段階に制限されます。 



21.セレクト 



CSSセレクタパラメータを渡すと、その下の現在の要素からCSSセレクタに基づいて、予想される一致する子ノードのコレクションを形成し、つまり、"select" 操作で、最後にExt型の結合要素の形で返されます。 Ext.select()で呼ばれた場合、ドキュメントからの検索を意味します。 



// 結果の CompositeElement を返します。 



Ext.fly('elId').select('div:nth-child(2)')。 



// 配列を返す 



Ext.fly('elId').select('div:nth-child(2)', 



true)となります。 



// 文書全体が検索される 



Ext.select('div:nth-child(2)')。 



22.クエリ 



DOM ノードの配列を返すクエリを実行します。オプションで、二番目のパラメータにクエリの開始点、指定しない場合はドキュメントが設定されます。 



// dom ノードの配列を返します 



Ext.query('div:nth-child(2)')を実行します。 



23.子 



入力されたセレクタに基づき、深さ無制限で検索し、マッチした場合は単一の子ノードを選択します。 



Ext.fly('elId').child('p.highlight'); // Ext.Elementの種類を返す。 



Ext.fly('elId').child('p.highlight', true); // domノードを返します。 



24.ダウン 



このセレクタに基づき、"direct" は単一の子ノードを選びます。 



Ext.fly('elId').down('span'); // 返される型はExt.Elementです。 



Ext.fly('elId').down('span', true); // domノードを返します。

25.親 



現在のノードの親を、オプションで期待されるセレクタを与えて返します。 



// Ext.Element 型の親ノードを返します。 



Ext.fly('elId').parent(); 



// 親ノードを返す、タイプは html dom 



Ext.fly('elId').parent("", true)を実行します。 



// 親ノードを返しますが、div のものである必要があります。 



Ext.fly('elId').parent("div"); 



26.next 



テキストノードをスキップして、次のサイドノードを取得します。オプションとして、期待されるセレクタを与えることができます。 



// Ext.Element 型の次のサイドノードを返す 



Ext.fly('elId').next(); 



// 次のサイドノードを返す、タイプは html dom 



Ext.fly('elId').next("", true)を実行します。 



// 次のサイドノードを返しますが、div である必要があり、見つかった場合は Ext.Element 型で返します。 



Ext.fly('elId').next("div") とします。 



27.prev 



テキストノードをスキップして、前のサイドノードを取得します。オプションとして、期待されるセレクタを与えることができます。 



// 前サイドのノード（Ext.Element型）を返す 



Ext.fly('elId').prev()。 



// 前サイドのノードを返す、タイプは html dom 



Ext.fly('elId').prev("", true)を実行します。 



// 前のサイドノードを返しますが、Ext.Element タイプの div である必要があります (found)。 



Ext.fly('elId').prev("div") を実行します。 



28.最初 



テキストノードをスキップして、最初のサイドノードを取得します。オプションとして、期待されるセレクタを与えることができます。 



// Ext.Element型の最初のサイドノードを返します。 



Ext.fly('elId').first(); 



// 最初のサイドノードを返す、タイプは html dom 



Ext.fly('elId').first("", true)を実行します。 



// 最初のサイドノードを返しますが、それは div である必要があり、見つかったときに返される Ext.Element 型です。 



Ext.fly('elId').first("div") とします。 



29.最後 



テキストノードをスキップして、最後のサイドノードを取得します。オプションとして、期待されるセレクタを与えることができます。 



// Ext.Element 型の最後のサイドノードを返します。 



Ext.fly('elId').last(); 



// 最後のサイドノードを返す、タイプは html dom 



Ext.fly('elId').last("", true)を実行します。 



// 最後のサイドノードを返しますが、それは div でなければならず、見つかった場合は Ext.Element 型で返されます。 



Ext.fly('elId').last("div") とします。

IV. DOM操作（DHTMLの共通タスクはDOM要素の追加、削除、変更、チェックです。） 



30. appendChild 



入力された要素をこの要素の子として分類する。 



var el = Ext.get('elId1')。 



// id で指定する 



Ext.fly('elId').appendChild('elId2')。 



// Ext.Elementが追加される 



Ext.fly('elId').appendChild(el); 



// セレクタは組み合わせで追加される 



Ext.fly('elId').appendChild(['elId2','elId3']); 



// domノードを直接追加する 



Ext.fly('elId').appendChild(el.dom); 



// divの集合体であるCompositeElementを追加する。 



Ext.fly('elId').appendChild(Ext.select('div')); 



31.appendTo 



入力された要素にこの要素を追加します。 



var el = Ext.get('elId1')。 



// 'elId' は 'elId2' に追加されます。 



Ext.fly('elId').appendTo('elId2'); 



Ext.fly('elId').appendTo(el); // です。 



Ext.Elementのelに追加する 



32.insertBefore 



要素のパラメータを渡して、現在の要素の前の位置に配置します。 



var el = Ext.get('elId1')。 



// の前に dom ノードが挿入されます。 



Ext.fly('elId').insertBefore('elId2')。 



//Ext.Elementのelが前に挿入される 



Ext.fly('elId').insertBefore(el)。 



33.insertAfter 



現在の要素の後に配置する要素の引数を渡します。 



var el = Ext.get('elId1')。 



// の後に dom ノードが挿入されます。 



Ext.fly('elId').insertAfter('elId2'); 



// Ext.Elementのelが後に挿入される 



Ext.fly('elId').insertAfter(el); 



34.insertFirst 



要素を挿入するか、要素を作成します（作成するにはパラメータとして "DomHelper設定オブジェクト" を使用します）。この場合、要素は現在の要素の最初の子として表示されます。 



var el = Ext.get('elId1')。 



// 挿入された dom ノードが最初の要素として使用される 



Ext.fly('elId').insertFirst('elId2'); 



// 挿入されたExt.Elementを1つ目の要素として 



Ext.fly('elId').insertFirst(el)。 



// DomHelper の設定項目で新しいノードを作成し、その新しいノードが最初の子要素として挿入されます。 



Ext.fly('elId').insertFirst({... 



タグ: 'p', 



clsを使用します。'myCls'です。 



htmlを使用します。'こんにちは私は新しい第一子です' 



}); 



35.置換 



入力された要素をこの現在の要素で置き換えるために使用されます。 



var el = Ext.get('elId1')。 



// 'elId' は 'elId2' に置き換わります。 



Ext.fly('elId').replace('elId2'); 



// 'elId' は 'elId1' を置換するようになる。 



Ext.fly('elId').replace(el)。 



36.replaceWith 



この要素を渡された要素で置き換えます。引数には、新しい要素か、作成する DomHelper 設定項目オブジェクトを指定することができます。 



var el = Ext.get('elId1')。 



Ext.fly('elId').replaceWith('elId2'); // 'elId2' は 'elId' に置換されます。 



Ext.fly('elId').replaceWith(el); //. 



'elId1' は 'elId' を置き換えます。 



// DomHelperの設定項目で新しいノードを作成し、'elId'をそのノードで置き換えます。 



Ext.fly('elId').replaceWith({... 



タグ: 'p', 



clsを使用します。'myCls'です。 



htmlを使用します。'こんにちは私はelIdを置き換えました' 



});

V. DomHelperの設定項目 



37.createChild 



DomHelperの設定項目オブジェクトを作成して要素に追加するためのパラメータを渡します。 



var el = Ext.get('elId')。 



var dhConfig = { 



タグ: 'p', 



clsを使用します。'myCls'です。 



htmlを使用します。'こんにちは私はelIdを置き換えました' 



}; 



// 新しいノードを作成し、'elId' の中に入れる。 



el.createChild(dhConfig)を実行します。 



// el の最初の子要素の前に、新しいノードを作成します。 



el.createChild(dhConfig, el.first())を実行します。 



38.wrap 



現在の要素を折り返すように新しい要素を作成します。 



Ext.fly('elId').wrap(); // elId を囲む div 



// elIdを新しい要素で囲む 



Ext.fly('elId').wrap({... 



タグ: 'p', 



clsを使用します。'myCls'です。 



htmlを使用します。'こんにちは私はelIdを置き換えました' 



});

VI. Htmlのスニペット 



38.insertHtml 



この要素にHTMLスニペットを挿入します。要素に挿入するhtmlをどこに配置するかは、beforeBegin, beforeEnd, afterBegin, afterEndを指定できます。第2パラメータでHTMLの断片を挿入し、第3パラメータでExt.Element.DOMオブジェクトの型を返すかどうかを決定します。 



Ext.fly('elId').insertHtml()。 



'beforeBegin'です。 



'

<a href="anotherpage.html'>クリックしてください。

' 



); // dom ノードを返す 



Ext.fly('elId').insertHtml()。 



'beforeBegin'です。 



'

<a href="anotherpage.html'>クリックミー

', 



真 



); // Ext.Element を返します。 



39.削除 



現在の要素を DOM 内部から削除し、キャッシュから削除します... 



Ext.fly('elId').remove();を実行します。 



elId はキャッシュにも dom 内にもありません。 



40.removeNode 



ドキュメントの DOM ノードを削除します。それが body ノードの場合は無視されます。 



Ext.removeNode(node); // dom内部から(HTMLElement)を削除する。

VII. Ajax 



41.ロード 



アップデータのExt.Updater.update()メソッドに直接アクセスします（引数は同じ）。引数は、Ext.Updater.update() メソッドと同じです。 



Ext.fly('elId').load({url:'serverSide.php'})を実行します。 



42.getUpdater 



この要素に対応するUpdateManagerを取得します。 



var updr = Ext.fly('elId').getUpdater(); 



updr.update({. 



url: 'http://myserver.com/index.php'。 



のパラメータを指定します。{ 



param1: "foo"。 



param2: "bar" 



} 



});

VIII. イベントハンドリング 



43.addListener/on 



この要素にイベントハンドラを追加します。短縮形は同等で、コードを書くときの手間を省くことができます。 



var el = Ext.get('elId')。 



el.on('click', function(e,t) {) 



// e は正規化されたイベントオブジェクト（Ext.EventObject）である。 



// t はクリックの対象要素で、Ext.Element.Text である。 



// これもオブジェクトポインタはtを指す 



}); 



44.removeListener/un 



この要素からイベントハンドラを削除します。un()は省略した言い方です。 



var el = Ext.get('elId')。 



el.un('click', this.handlerFn); 



// または 



el.removeListener('click', this.handlerFn)を実行します。 



45.Ext.EventObject（イベントオブジェクト 



EventObjectは、すべてのブラウザを統一し、W3C標準のアプローチに準拠しようとする、このようなイベントモデルを提示する。 



// eItは標準的なイベントオブジェクトではなく、Ext. 



関数 handleClick(e){ 



e.preventDefault()を実行します。 



var target = e.getTarget(); 



... 



} 



var myDiv = Ext.get('myDiv')。 



myDiv.on("click", handleClick)を実行します。 



// または 



Ext.EventManager.on('myDiv', 'click', handleClick)を実行します。 



Ext.EventManager.addListener('myDiv', 'click', handleClick)を実行します。

IX. 高度なイベント機能 



46. デレゲーション デレゲーション 



イベントデリゲーションを代わりに使用するには、選択することで依存関係のロジックに従ったイベントハンドラをコンテナに登録します。 



Ext.fly('actions').on('click, function(e,t) {) 



switch(t.id) { 



ケース ''btn-edit': 



// 特定の要素に対するイベント固有の処理を行う 



を壊します。 



case 'btn-delete': 



// 特定の要素を処理するためのイベント固有の処理 



を壊します。 



case 'btn-cancel': 



// 特定の要素を処理するためのイベント固有の処理 



を壊します。 



} 



});

47. デリゲート 



イベントのハンドラ登録時に設定するオプションを追加することができます。ターゲット要素をフィルタリングしたり、次のレベルでターゲットの子を探したりするためのシンプルなセレクタです。 



el.on('click', function(e,t) {) 



// イベント特有の処理を実行する 



}, this, { 



// 子孫の'clickable'に有効です。 



デリゲート: '.clickable' 



}); 



48. フリップホバー 



Extのフリップメニューの例です。 



// マウスが要素に入ったときの処理 



関数 enter(e,t){ 



t.toggleClass('red')。 



} 



// マウスが要素から離れたときの処理 



関数 leave(e,t){ 



t.toggleClass('red')。 



} 



// ホバーにサブスクライブする 



el.hover(over, out)を実行します。 



49. イベントハンドルの削除 removeAllListeners 



この要素に参加しているすべてのリスナーを削除します。 



el.removeAllListeners()を実行します。 



50. 一度に複数回起動させるかどうか 



このオプションは、イベントハンドラを登録する際に設定することができます。trueを指定すると、イベントが発生した後、次回に自分自身を削除するハンドラを追加します。 



el.on('click', function(e,t) {) 



// イベント特有の処理を実行する 



}, this, { 



single: true // 1度トリガーをかけたらそれ以上イベントを実行しない。 



}); 



51. バッファー buffer 



イベントのハンドラを登録する際に、このオプションを設定に追加することができます。ミリ秒単位で指定することで、Ext.util.DelayedTaskの遅延時間後にハンドラ関数が実行されるようにスケジュールされます。そのイベントで再トリガーされた場合、元のハンドラ・ハンドルは有効にならず、新しいハンドラ・ハンドルが代わりにスケジュールされます。 



el.on('click', function(e,t) {) 



// イベント特有の処理を実行する 



}, this, { 



バッファに格納されます。1000 // 1秒間隔で応答イベントを繰り返す 



}); 



52. delaydelay 



イベントのハンドラを登録する際に設定するオプションを追加できます。これは、イベントが発生してからハンドラ関数の実行を遅延させる時間を設定するものです。 



el.on('click', function(e,t) {) 



// イベント特有の処理を実行する 



}, this, { 



// イベントに反応してタイミングを開始する遅延イベント（ここでは1秒） 



ディレイ 1000 



}); 



53. targettarget 



イベントハンドラを登録する際に、このオプションを設定に追加することができます。対象要素を追加で指定したい場合は、この設定項目の上に設定します。これにより、イベント報告フェーズでその要素に遭遇したときのみ、 このハンドラが実行されるようになります。 



以下のようにコードをコピーしてください。

el.on('click', function(e,t) {) 



// イベント特有の処理を実行する 



}, this, { 



// このイベントは、その中の最初の 'div' に遭遇したときのみ発生します。 



target: el.up('div') 



});

X. サイズ & サイズ 



54.getHeight 



要素のオフセット高を返します。 



var ht = Ext.fly('elId').getHeight(); 



55.getWidth 



要素のオフセット幅を返します。 



var wd = Ext.fly('elId').getWidth(); 



56.setHeight 



要素の高さを設定します。 



Ext.fly('elId').setHeight()を実行します。 



57.setWidth 



要素の幅を設定します。 



Ext.fly('elId').setWidth()。 



58.getBorderWidth（ボーダー幅 



指定された辺のパディングの幅を返します。 



var bdr_wd = Ext.fly('elId').getBorderWidth('lr'); 



59.getPadding 



は、t, l, r, b のいずれか、またはその組み合わせです。例えば、lr を渡すと、(l)eft padding +®ight padding が得られます。 



var padding = Ext.fly('elId').getPadding('lr'); 



60.クリップ 



現在のオーバーフローを保存し、要素のオーバーフローのクロッピングを行います - 削除するには unclip() を使用します。 



Ext.fly('elId').clip()。 



61.unclip 



clip()を呼び出す前の、元の切り抜き部分（オーバーフロー）を返します。 



Ext.fly('elId').unclip()を実行します。 



62.isBorderBox 



異なるCSSルール/ブラウザをテストし、要素がBorder Boxを使用しているかどうかを判断します。 



if (Ext.isBorderBox) {. 



// 



}

XI. ポジショニング

63.getX 



ページ座標からの相対的な要素のX位置を返します。正しいページ座標を得るためには、その要素はDOMツリーの一部でなければなりません (display:none または結合されていない要素は false を返します)。 



var elX = Ext.fly('elId').getX() 



64.getY 



ページ座標からの相対的な要素のY位置を返します。正しいページ座標を得るためには、その要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素はfalseを返します）。 



var elY = Ext.fly('elId').getY() 



65.getXY 



要素の現在のページ座標の位置を返します。正しいページ座標を持つためには、その要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素はfalseを返します）。 



var elXY = Ext.fly('elId').getXY() // elXYは配列です。 



66.setX 



ページ座標からの相対的な要素のX位置を返します。正しいページ座標を得るためには、その要素はDOMツリーの一部でなければなりません (display:none または結合されていない要素は false を返します)。 



Ext.fly('elId').setX(10) 



67.setY 



ページ座標からの相対的な要素のY位置を返します。正しいページ座標を得るためには、その要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素はfalseを返します）。 



Ext.fly('elId').setY(10) 



68.setXY 



要素の現在のページ座標の位置を返します。正しいページ座標を持つためには、その要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素はfalseを返します）。 



Ext.fly('elId').setXY([20,10])を実行します。 



69.getOffsetsTo 



現在の要素と入力された要素との間の距離を返します。正しいページ座標を得るためには、両方の要素がDOMツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。 



var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl); 



70.getLeft 



左のX座標を取得します。 



var elLeft = Ext.fly('elId').getLeft(); 



71.getRight 



要素の右側のX座標（要素X位置＋要素幅）を取得します。 



var elRight = Ext.fly('elId').getRight(); 



72.getTop 



上部のY座標を取得します。 



var elTop = Ext.fly('elId').getTop(); 



73.getBottom 



要素の底辺のY座標（要素Y位置＋要素幅）を取得します。 



var elBottom = Ext.fly('elId').getBottom(); 



74.setLeft 



CSSスタイルを直接使用して、要素の左位置を設定します（setX()の代わりに）。 



Ext.fly('elId').setLeft(25) 



75.setRight 



要素 CSS Right のスタイルを設定します。 



Ext.fly('elId').setRight(15) 



76.setTop 



CSS スタイルを使用して要素の上端位置を直接設定します（setY() の代わり）。 



Ext.fly('elId').setTop(12) 



77.setBottom 



要素 CSS Bottom のスタイルを設定します。 



Ext.fly('elId').setBottom(15) 



78.setLocation 



要素の位置がどのように配置されているかにかかわらず、ページ上の座標を設定します。ページ座標を持つためには、その要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素は、invalidやfalseとして返されます）。 



Ext.fly('elId').setLocation(15,32) 



79.moveTo 



この要素がどのように配置されているかに関係なく、ページ上のこの要素の座標の位置を設定します。ページ座標を持つためには、この要素はDOMツリーの一部でなければなりません（display:noneや結合されていない要素は、invalidやfalseとして返されます）。 



Ext.fly('elId').moveTo(12,17) 



80.位置 



要素の位置を初期化します。期待する位置が渡されず、かつ要素がまだ配置されていない場合、現在の要素を相対的な配置に設定します。 



Ext.fly('elId').position("相対値") 



81.clearPositioning 



位置をクリアし、ドキュメント読み込み時にデフォルトにリセットします。 



Ext.fly('elId').clearPositioning() 



Ext.fly('elId').clearPositioning("top")です。 



82.getPositioning 



CSSの位置情報を含むオブジェクトを返します。有用なヒント: setPostioning と一緒に使用すると、更新が実行される前に要素のスナップショットを取得し、その後要素を復元することができます。 



var pos = Ext.fly('elId').getPositioning() 



83.setPositioning 



getPositioning()で返されたオブジェクトによる位置決めに移行する。 



Ext.fly('elId').setPositioning({... 



left: 'static', 



右： '自動' 



}) 



84.translatePoints 



要素のCSS left/top値に変換するためのページ座標のパラメータを送ります。 



// {left:translX, top: translY} です。 



var points = Ext.fly('elId').translPoints(15,18);