[ExtJS 5学習ノート]18節Extjs 5のpanelのdockediems属性配置toolbar


この記事のアドレス:http://blog.csdn.net/sushengmiyan/article/details/39156321
公式例: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems
この文章の作者:sushengmiyan
--------------------------------------------------------------
Wordオフィスソフトのように、いくつかのボタンを私達のオフィスエリアの上に置く必要があります。時々私達はパンと一緒に結びつける必要があります。この時、パンの中にドッキングしたコンポーネントtoolbarを設置すれば実現できます。Main.jsを修正
学生リストのパンモジュールに下記のように追加されました。
              dockedItems: [       
			    {
				        xtype: 'toolbar',	
				        items: [{  
                        //xtype : 'gridtoolbar', //   toolbar  
                            text : '  ',   
                            glyph : 0xf016    
                        },{  
                            text : '  ',  
                            glyph : 0xf044  
                        },{  
                            text : '  ',  
                            glyph : 0xf014  
                        },{  
                            text : '  ',  
                            glyph : 0xf022  
                        }],
		                dock: 'top',
			  }], 
[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar_第1张图片
表示効果は以下の通りです。
[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar_第2张图片
後期のメンテナンスを便利にするために、私達は新しく加入したこれらの寄港内容を一つの種類に抽出しました。
/** 
 *            ,    
 */  
Ext.define('oaSystem.view.main.region.GridToolbar', {  
            extend : 'Ext.toolbar.Toolbar',  
            alias : 'widget.gridtoolbar',  
            initComponent : function() {  
                this.items = [{  
                            text : '  ',   
                            glyph : 0xf016,    
                        },{  
                            text : '  ',  
                            glyph : 0xf044  
                        },{  
                            text : '  ',  
                            glyph : 0xf014  
                        },{  
                            text : '  ',  
                            glyph : 0xf022  
                        }];  
                this.callParent();  
            }  
});  
は、Main.jsにこのファイルを導入する:
[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar_第3张图片
後期にこれらの内容を修正したいなら、直接にメーンの下のレギオンのフォルダの下でGrid Toolbar.jsファイルに行けばいいです。