[ExtJS 5学習ノート]第八節Extjs 5のExt.toolbar.Toolbarツールバーコンポーネントとその応用

4376 ワード
Json javascript
この記事のアドレス:http://blog.csdn.net/sushengmiyan/article/details/38515499
この文章の作者:sushengmiyan
--------------------------資源リンク---------------------------------------------------------------------------------------
Ext JS API:  http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar
API docアドレス:
    オンライン英語5.0住所:http://docs.sencha.com/extjs/5.0.0/apidocs/#!/アプリ/Ext
    日本語4.1翻訳オンラインアドレス:http://extjs-doc-cn.github.io/ext4api/
     日本語4.1ローカルにダウンロード:https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip
--------------------------------------------------------------------------------
コンポーネントの原理を理解したら、私たちはそれらを私たちのプロジェクトに具体的に適用できます.今はツールバーを私たちのアプリケーションに追加します.
準備工作
  1.sencha cmdを設置し、正しく使用できます. ここで勉強します
  2.コンポーネントにアイコンを追加する操作と原理を理解しました.  ここで勉強します
  3.Ext JSのコンポーネントとテンプレートの方法を理解しました.   ここで勉強します
本節の目標
  sencha cmd generate appコマンドを使って簡単なアプリケーションを作成した後、アイコンのサポートを追加しました.今はこのページに内容を豊かにします.一般的なアプリケーションにはツールバーがあります.新しく作成したページにツールバーを追加します.
第一歩:ツールバーの実装クラスを定義する
Ext.define(
  'oaSystem.view.main.region.Top',//ClassName   ，           ，oaSystem        ，    view/main/region   ，      Top.js   
  {
     extend: 'Ext.toolbar.Toolbar',//   Ext    ，          ，        
	 alias: 'widget.maintop',//  ，        
	 items: [
	   {
                 // xtype: 'button', //         
		 text: '  ',  
		 glyph: 0xf015,//    
	   }, {
		 text : '  ',
		 glyph : 0xf059
	   }, {
		 text : '  ',
		 glyph : 0xf05a
	   },
       {
          xtype: 'textfield',//     button       
          name: 'searchField',
          emptyText: '         '
       }, {
		 text : '  ',
		 glyph : 0xf00e
	   }, '->',{
		 text : '    ',
		 glyph : 0xf007
	   },{
		 text : '  ',
		 glyph : 0xf011
	   }, {
		 glyph : 0xf102,
		 handler : 'hiddenTopBottom',
		 tooltip : '         ',
		 disableMouseOver : true
	   }	 
	 ]
  }
);
Extのネーミングによって、私たちが定義しているクラスはoaSystem.view.main.region.Topです.だから、該当するフォルダの下でこのjsファイルを作りに行きます.
Ext.define方法紹介Ext.defineは一つのクラスを定義またはカバーしています.三つのパラメータ(String)を受け入れます.
 クラスName、  Object
 ダタ、  Function
 createdFn)
その中でclassinameは私達が定義した類名です.先ほど書いたのに対応して、oaSystem.view.main.region.Topです.
dataは対象です.標準ではjsonのようなキーペアの形で入ることができます.また、関数(しばらくは研究しない)にも入ることができます.ここでコードの後半部分はdataオブジェクトです.
createdFnはinitComponent()のような初期化の関数です.この例には何も入ってきていません.javascriptはパラメータを定義しています.
Ext.toolbar.Toolbar類の紹介
  Ext.toolbar.Toolbarは基本ツールバー種類です.ツールバーのデフォルトのタイプ(xtype)はボタンですが、ツールバーの要素(ツールバーのコンテナのサブアイテム)は、任意の種類のコンポーネントであり、xtypeでタイプを指定します.ツールバーは、TreeStoreからナビゲーションボタンとしてのトレースの階層データを表示し、各ボタンはノードを表します.ツリーの「選択」ノードをボタンをクリックします.非リーフノードは子供ノードを表示し、プルダウンメニューはブラウズパス記録に対応するボタンを表示し、項目のメニューをクリックすると、対応するサブノードの選択をトリガする.セレクトセレクションを使用してプログラム的に設定するか、またはget Selectを使用して選択されているかどうかを検索するかを選択します.ツールバー要素は、それらの構造関数によって明確に作成されたり、それらのxtypeタイプによって作成されたり、動的にaddを追加することができます.
  その中でToolbar類にはいくつかの一般的な属性があります.
xtypeの具体的なタイプは、button(デフォルトのボタン)、tbtext(テキストを直接レンダリング)、splitton(分割ボタン)、tbfil(使用->)を使用してコンテナを右揃え、textfield(テキスト領域)tbspace(スペース、‘’に相当)です.
一般的に、私達は一つのtextを定義します.
{
  xtype: 'button',
  name: 'text 1',
}
このような方法は簡単な方法があります.
'text 1'
二つの効果は同じです.ツールバーの使用については、APIを参照することができます.例はかなり多いです.また、ライブpreview機能を使って確認することができます.
ステップ2:ツールバーをページに追加します.
Main.jsでは、以下のようなitems値が追加されます.
	  {
		 xtype: 'maintop',
		 region: 'north', 

	  },
xtypeは私たちが以前Top.jsで定義したalias値で、Top.jsを導入することを表しています.ツールバーを追加しました.
レギオンはツールバーを設置する位置を表しています.位置は東西南北、つまりページの上下左右です.
更新すればいいです.効果を見てみます.
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用_第1张图片
外部のjsファイルを引用する方法です.もちろん、createメソッドを使ってツールバーを直接作成することもできます.
マスターはExtJsのAPIを使います.
APIの文書は英語の最新のものが5.0であり、翻訳の中国語が4.1であるので、比較的早いと提案しています.まず違いがあるかどうかを見て、英語を中心とした4の中国語を補助として、学習が迅速です.これからどんなセットを使いたいですか?
Extjs 5を一生懸命勉強しています.勉強の進度が遅いので、いい勉強方法があります.よろしくお願いします.
転載先:https://www.cnblogs.com/muyuge/p/6152513.html
psp開発------ハロルド
pythonファイルをローカルサーバにアップロードします.