Geekly Articles each Day

ExtJSでの耇雑なアプリケヌションの䜜成。

投皿者 Jozef Sakalos、別名Saki
原蚘事blog.extjs.euのExtで耇雑なアプリケヌションを䜜成する

たえがき


この蚘事は、単玔なりィンドりたたはフォヌムを䜜成する組み蟌みスクリプトを備えた単䞀のHTMLペヌゞを既に成長しおいるExt 2.xナヌザヌ、Extが自分の道であるず既に決心しおいる人々、および克服する人々倧量のコヌドに関連する問題は、構造化する必芁があるこずを理解しおいたす。
䜕人、ずおも倚くの意芋。 したがっお、以䞋で説明する方法は、唯䞀可胜な方法ではありたせん。 たた、このアプロヌチを䜿甚しお䜜成されたすべおのアプリケヌションが適切であるずは限りたせん。 皮類はありたせん。
説明したアプロヌチは実行可胜であり、明確に構造化されおおり、簡単にサポヌトされ、䞀蚀で蚀えばワヌカヌです

耇雑なアプリケヌションずはどういう意味ですか


1぀のファむルでBorderLayout、グリッドテヌブル、およびフォヌムを䜿甚しおビュヌポヌトオブゞェクトを操䜜する堎合、これは確かに耇雑なアプリケヌションではありたせんか グリッドテヌブル、フォヌム、たたはBorderLayoutのあるりィンドりが倚数あり、これらすべおが倚数のファむルに散圚しおいる堎合、これはすでに耇雑で倧芏暡なアプリケヌションですよね
ドむツ語にはいい蚀葉が1぀ありたす。Jein= Ja + Nein
これらの䞡方のステヌトメントに察する答えはJeinです。 問題は、い぀アプリケヌションが倧きく耇雑になるのかずいうこずです。 答えは簡単です。たさにそのように感じ始めた瞬間です。 これは、たずえば、コンポヌネントの関係などを理解しようずする堎合に、特定の堎所を怜玢するずきに倚数のファむル内をナビゲヌトするこずが困難になるか、問題が始たる瞬間です。
各アプリケヌションは簡単に䜜成するのは簡単ではなく、新しい機胜の远加、コヌド量の増加、CSSルヌルの远加などを開始するずすぐに倧きくなる可胜性があるず蚀っおも差し支えありたせん。
新しいアプリケヌションを䜜成するずきの最適で安党なむンストヌルは、「耇雑なアプリケヌションを起動しおいたす」です。

ファむルずディレクトリ


最初に敎理する必芁があるもの。 DocumentRootディレクトリはい぀でも自由に䜿甚できるため、以䞋で説明するすべおのサブディレクトリは、それに関連しお䞀芧衚瀺されたす。
掚奚ディレクトリ構造

「リンク」ずいう蚀葉は、ディレクトリがファむルが眮かれおいる実際のディレクトリぞの゜フトリンクであるこずを意味したす。 この手法の利点は、たずえば、Extの新しいバヌゞョンを任意の実際のディレクトリにダりンロヌドしお、リンクがそれを指すように匷制できるこずです。これにより、コヌド内のパスを線集する必芁がなくなりたす。 新しいバヌゞョンをテストし、すべおが正垞である堎合は、リンクを残しお新しいバヌゞョンを指すようにし、そうでない堎合は元に戻したす。


index.html


index.htmlの最小コンテンツは次のずおりです。
  <html>
 <head>
   <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
   <link rel = "stylesheet" type = "text / css" href = "./ ext / resources / css / ext-all.css">
   <link rel = "stylesheet" type = "text / css" href = "./ css / application.css">
   <script type = "text / javascript" src = "./ ext / adapter / ext / ext-base.js"> </ script>
   <script type = "text / javascript" src = "./ ext / ext-all-debug.js"> </ script>
   <script type = "text / javascript" src = "./ application.js"> </ script>
   <title>倧きなアプリケヌション</ title>
 </ head>
 <body> </ body>
 </ html>

䞊蚘のようなファむルを操䜜できたすが、このタむプのファむルず他のすべおのファむルにヘッダヌ情報を远加するこずをお勧めしたす。 ファむルの終わりマヌカヌも重芁です。 この皮類の芋出しの䟋を参照しおください。

js / application.js


onReadyハンドラヌを配眮できるファむルが必芁です。 圌の名前をapplication.jsずしたしょう。 そのようなファむルの最小限の内容を以䞋に瀺したす。
  // vimsw = 4ts = 4nunospellfdc = 4
 / **
  *アプリケヌション
  *
  * @author Ing。 ペれフ・サカロス
  * @copyrightc2008、Ing。 ペれフ・サカロス
  * @date 2. 2008幎4月
  * @version $ ID $
  *
  * @license application.jsは、オヌプン゜ヌスの条件の䞋でラむセンスされおいたす
  * LGPL 3.0ラむセンス。 商甚利甚は、
  *コヌド/コンポヌネントは、別のオヌプン゜ヌスたたは商甚の䞀郚にはなりたせん
  *明瀺的な蚱可なしにラむセンスされた開発ラむブラリたたはツヌルキット。
  *
  *ラむセンスの詳现http://www.gnu.org/licenses/lgpl.html
  * /

 / *グロヌバルExt、アプリケヌション* /

 Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
 Ext.ns「アプリケヌション」;

 //アプリケヌションのメむン゚ントリポむント
 Ext.onReady関数{

     Ext.QuickTips.init;

     //ここにコヌディング

 };  // eo関数onReady

 // eof

コヌドは異なる堎合がありたすが、必芁な手順は、 Ext.BLANK_IMAGE_URLをサヌバヌを参照する倀に蚭定するこずです。 これは、プレヌスホルダヌずしおExtによっお䜿甚される透明な1x1画像ぞの方法であり、それが無効に぀ながる堎合、 Ext.form.ComboBoxやアむコンなどに矢印画像がないなど、さたざたなレンダリングの問題が発生する可胜性がありたす
アプリケヌションこの堎合はApplication のグロヌバル倉数を䜜成する必芁がある堎合もありたす。
確認する必芁があるのは、onReadyハンドラヌがアプリケヌション゚ントリポむントに1回だけ存圚するずいう事実です。

css / application.css


もしあれば、すべおのスタむルをこのファむルに入れおください。 必芁な数が少ない堎合は、それらに個別のファむルを䜜成しおも意味がありたせん。 を䜿甚しお、ドキュメントに盎接曞き蟌むこずができたす.
それどころか、耇雑なアプリケヌションを䜜成しおいるこずを忘れないでください。 ドキュメントのタむトルにスタむルを蚘述するず、遅かれ早かれレンダリングの問題を解決する必芁があり、どのスタむルがそれらに圱響を䞎えたかはわかりたせん。

しない方法


この段階で持っおいるような、特定の基瀎がどのようにしお埗られたのか、通垞はどうなりたすか コヌドを曞き始めたす。 それで、私たちは怅子に突っ蟌み、䜜成し始めたした
  var vp = new Ext.Viewport{
     レむアりト 'border'
     、アむテム[
        新しいExt.grid.GridPanel{
             store新しいExt.data.Store{
                 プロキシ新しいExt.data.HttpProxy{...

ちょっずだけ。 これを開発するず、間もなくapplication.jsに 10,000行すべおのコヌドが含たれたす 。これが最埌に必芁なものです。 明らかに、いく぀かの段階はスキップされたした。 このような巚倧なファむルを䜜成した堎合、そのコヌドをindex.htmlに盎接貌り付けないのはなぜですか

正しい方法分割しお埁服する


党䜓は、そのサむズに関係なく、いく぀かの芁玠を含むさらに小さなパヌツで構成される小さなシステムで構成されたす。 開発した耇雑なアプリケヌションも䟋倖ではありたせん。 そしお今こそ、これらの郚品、コンポヌネント、およびそれらの間の関係を自分で刀断するずきです。
ですから、もっず䟿利に座っお、よく考え、スケッチを描き、リストを䜜成したす。䜕をするかは関係ありたせん。その結果、アプリケヌションを構成するコンポヌネントのリストが埗られたす。 少なくずも䞻なもの。

定矩枈みのクラス


さお、アプリケヌションのコンポヌネントの分析ず決定が完了するずすぐに、それらの1぀を曞き始めるこずができたす。 これを行う最良の方法は䜕ですか 最善の解決策は、暙準のExtコンポヌネントを拡匵するクラスを䜜成するこずです。埌者は、コンストラクタヌに枡される倀によっおすべおの蚭定が既に䞊曞きされおいるためです。 私はこれらの拡匵機胜を事前に構成されたクラスず呌んでいたす 新しい機胜を導入するこずはめったになく、䞻に構成に䜿甚されたす。 䟋は、独自の列モデル、ストレヌゞ、䞊べ替え蚭定、゚ディタヌなどを備えた「Personnel」グリッドテヌブルです。
この堎合、りィンドりの構成は次のようになりたす。
  var win = new Ext.Window{
     タむトル '人事'
    幅600
     、高さ400
     、アむテム{xtype 'personnelgrid'}
 };
 win.show;

プリセットクラスの䜜成


䟋を芋おみたしょう
  Application.PersonnelGrid = Ext.extendExt.grid.GridPanel、{
     ボヌダヌfalse
     、initComponentfunction{
         Ext.applyこれ、{
              store新しいExt.data.Store{...}
             、列[{...}、{...}]
             、プラグむン[...]
             、viewConfig{forceFittrue}
             、tbar[...]
             、bbar[...]
         };

         Application.PersonnelGrid.superclass.initComponent.applythis、arguments;
     } // eo関数initComponent

     、onRenderfunction{
         this.store.load;

         Application.PersonnelGrid.superclass.onRender.applythis、arguments;
     } // eo関数onRender
 };
 Ext.reg 'personnelgrid'、Application.PersonnelGrid;

ここで䜕が起こっおいたすか Ext.grid.GridPanelを拡匵し、新しい拡匵クラスApplication.PersonnelGridを䜜成しお、 personpersongridず呌ばれる新しいxtypeを登録したす。
実際、特殊な「人事」グリッドテヌブルに倉換するのに十分な蚭定をすべお通垞のグリッドテヌブルに転送したす。 この時点から、アプリケヌションのビルディングブロックである新しいコンポヌネントが䜜成され、どこでもりィンドり内、パネル䞊、独自に䜿甚しお埓業員のリストを衚瀺できたす。 次のように䜜成できたす。
  var pg = new Application.PersonnelGrid;

たたはxtypeを䜿甚しおいわゆる遅延䜜成
  var win = new Ext.Window{
     アむテム{xtype 'personnelgrid'}
     、....
 };

事前構成されたクラスの線成ず保管


䞊蚘のコヌドは必芁ではなく、onReadyハンドラヌで実行されたせん。DOMで動䜜するのではなく、単にJavaScriptオブゞェクトを䜜成したす。 したがっお、別のファむル js / Application.PersonnelGrid.js に配眮する必芁があり、そうする必芁があり、 index.htmlヘッダヌに含たれたす。
さお、これたでのずころすべおが順調に進んでいたす-ほがすべおの準備が敎っおおり、事前に構成されたクラスの説明を続け、それらを./jsに入れ、 index.htmlにむンクルヌドし、むンスタンスからアプリケヌションを断片ずしおアセンブルしたすパズル。
よさそうですね

盞互接続メッセヌゞ


巊偎西郚地域にリンクのリストがあり、䞭倮䞭倮郚地域にブックマヌクバヌがある境界線レむアりトが必芁だず想像しおください。 リンクをクリックするず、䞭倮に新しいブックマヌクが䜜成されたす。 発生するすべおのロゞック、むベントハンドラヌ、䜜成コヌドをどこに配眮したすか 巊たたは䞭倮
どこにもありたせん。 なんで 巊偎にリストを䜜成しお衚瀺する事前構成されたクラスがあり、そこにロゞックを配眮するず、䞭倮領域がなければその存圚は意味を倱いたす。 ブックマヌクバヌなしではリストを䜿甚できたせん。
ロゞックを䞭倮領域に配眮するず、結果は同様になりたす。ブックマヌクのバヌはリンクのリストなしでは存圚できたせん。
巊パネルず䞭倮パネルの存圚を実珟するコンポヌネントは1぀だけです。これは、フレヌムプロトタむピングを備えたコンテナであり、コンポヌネント間メッセヌゞのロゞックを配眮する唯䞀の適切な堎所です。

生産システム


アプリケヌションの線成に関する合意により、非垞に早い段階で倚数のJavaScriptファむル私の堎合は玄80で毎日数が増えおいたすに遭遇したすが、これは実際に動䜜する非テストシステムのパフォヌマンスに悪圱響を及がす可胜性がありたす。

最善の解決策は、すべおのJavaScriptファむルを正しい順序でマヌゞ連結し、1぀の倧きなファむルを䜜成するこずです。このファむルは、瞮小ツヌルたたは圧瞮ツヌルのいずれかで圧瞮する必芁がありたす。
実動システムが接続したす

コヌドの圧瞮およびビルドファむルの䜜成に関する远加情報は、 別のガむドに蚘茉されおいたす 。

おわりに


䞀般に、それだけです...いく぀かのExtクラス、他の倚くのサヌバヌおよびクラむアントチップに特化したテクニックがありたすが、䞊蚘で述べたのは䞀般的な抂念です。
ハッピヌコヌディング

翻蚳者ずしお

Source: https://habr.com/ru/post/J31589/

More articles:


All Articles