extjs_extjs での 2 つの tbar 問題に関するディスカッション

バージョン: extjs3.4

extjs に触れたことのある同志は皆、各パネルに tbar (上部バー上部ツールバー)、bbar (下部バー下部ツールバー) があることを知っています。

誰もがそれをしていますクエリ ページは一般的にどのようなものですか?
最も基本的なものは、データを表示するためのテーブルです。
さらに一歩進んでください:
ボタンの追加など、データに対する操作を追加します
さらに一歩進んで:
一般的なクエリにはクエリ条件があり、クエリ条件はすぐに見つけることができます。

extjs に関しては、extjs は多くのコンポーネントをカプセル化しており、コンポーネントの概念は、パネル、ボタン、コンポーネント、コンテナーなど、Java Swing と非常によく似ています。
上記のクエリページの場合、Java 開発を行う場合は 3 つのテーブルまたは 3 つの div で十分です。
extjs についてはどうですか?
実際、extjs もデータを表示するには、グリッド コンポーネント、クエリ ボタン、ボタン コンポーネント、クエリ条件、テキスト フォーマットを使用しますが、追加ボタンとクエリ検索条件を tbar に配置すると、次のようになります。も機能します。少なくとも機能は実装されています。
しかし、最も明白な行動を考慮すると、すべては顧客のためです。つまり、ユーザーを愚か者と考え、すべてを愚か者のような方法で行うことです。たとえば、オートフォーカス カメラやオートフォーカス インストール システムは非常に人気があります。

では、Xindaya のために、2 つの tbar に実行ボタンとクエリ検索条件をそれぞれ配置するにはどうすればよいでしょうか?
グリッドに 2 つの tbar を追加するコードがインターネット上にあります。プロジェクトに不安がある初心者向けに、Xindaya を実現する簡単な方法があります。
最も簡単な方法は、リスナーを使用する方法です。

まず: 追加ボタンなどの実行ボタンをパネルに付属の Tbar に配置します。
2 番目: ツールバーをカスタマイズし、クエリ検索条件を設定します。
3 番目: パネルに付属の tbar を監視するようにツールバーをカスタマイズします (つまり、2 番目の監視が最初の監視になります)

コードは次のとおりです:

コードをコピーします コードは次のとおりです:

tbar:new Ext.Toolbar({items:['-']}),
//ボタンツールバーの下にクエリツールバーを書き込みます
listeners: {
render: function(){
queryBar.render(this.tbar);
}
}

//私たちのプロジェクト部分 メインコードは次のとおりです:
mnguser.panel = new Ext.Panel({
id :'mngmenuDiv',
title : 'User Management',
region : 'center'、
layout : 'fit'、
style : 'padding:3px;'、
bodyBorder : true、
border : true、
items : _grid、
tbar:new Ext.Toolbar({items: ['-']}),
//ボタンツールバーの下にクエリツールバーを書き込みます
listeners: {
render: function(){
queryBar.render(this.tbar);
}
}
});

mnguser.body = Ext.extend(Ext.Viewport, {
レイアウト : ' border',
initComponent : function() {
this.content = mnguser.panel;
menuOpt(this.content); // 組み込み tbar に実行ボタンを追加します。 apply(this, {
items : [this.content]
});
mnguser.body.superclass.initComponent.call(this);


効果は次のとおりです: