[ExtJS 5学習ノート]18節Extjs 5のpanelのdockediems属性配置toolbar
3260 ワード
この記事のアドレス: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を修正
学生リストのパンモジュールに下記のように追加されました。
表示効果は以下の通りです。
後期のメンテナンスを便利にするために、私達は新しく加入したこれらの寄港内容を一つの種類に抽出しました。
後期にこれらの内容を修正したいなら、直接にメーンの下のレギオンのフォルダの下でGrid Toolbar.jsファイルに行けばいいです。
公式例: 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',
}],
表示効果は以下の通りです。
後期のメンテナンスを便利にするために、私達は新しく加入したこれらの寄港内容を一つの種類に抽出しました。
/**
* ,
*/
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にこのファイルを導入する:後期にこれらの内容を修正したいなら、直接にメーンの下のレギオンのフォルダの下でGrid Toolbar.jsファイルに行けばいいです。