サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2013/07/30

Ext JS−コンポーネントを横に並べる場合−その4

コンポーネントを横に並べる簡単な方法がわかりました。panellayout: 'hbox'を指定します。



Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody()
,width: 700
,bodyPadding: 10
,title: 'リスト'
,items: [{
xtype: 'panel'
,title: '検索'
,layout: 'hbox'
,items: [{
xtype: 'datefield'
,fieldLabel: '日付'
,width: 80
,id: 'hiduke'
,value: new Date()
,listeners: {
change: function(o, newValue, oldValue, eOpts) {
// 省略
}
}
},{
xtype: 'label', html: '', width: 30
},{
xtype: 'button'
,width: 80
,id: 'btn'
,text: 'click!'
,handler: function() {
// 省略
}
},{
xtype: 'label', html: '', width: 30
},{
xtype: 'textfield'
,fieldLabel: '名前'
,width: 200
,id: 'name'
},{
xtype: 'button'
,text: '検索'
,width: 80
,handler: function() {
// 省略
}
}]
}]
});

その3の方法では、横に並べる項目の個数によって、layoutConfig: {columns: 3}の"3"の箇所を変更する必要がありますが、今回の方法だと単にitemsにコンポーネントを並べて書くだけなので、変更箇所が少なくて済みます。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/1637-c816d7ff

■  カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。