extjs_extjs의 두 가지 tbar 문제에 대한 토론

버전: extjs3.4

extjs를 접한 동지들은 각 패널에 tbar(상단 바 상단 도구 모음), bbar(하단 바 하단 도구 모음)가 있다는 것을 모두 알고 있습니다.

누구나 합니다. 쿼리 페이지는 일반적으로 어떤 모습인가요?
가장 기본적인 것은 데이터를 표시하는 테이블입니다.
한 단계 더 나아가기:
버튼 추가 등 데이터에 대한 작업 추가
한 단계 더 나아가기:
일반 쿼리에는 쿼리 조건이 있어 쿼리 조건을 빠르게 찾을 수 있습니다.

extjs의 경우 extjs는 많은 컴포넌트를 캡슐화하는데, 패널, 버튼, 컴포넌트, 컨테이너 등 컴포넌트의 개념은 자바 스윙과 매우 유사합니다.
위 쿼리 페이지의 경우 Java 개발 시에는 테이블 3개나 div 3개면 충분합니다.
extjs는 어떻습니까?
사실 extjs도 데이터를 표시하려면 그리드 컴포넌트, 쿼리 버튼, 버튼 컴포넌트, 쿼리 조건, 텍스트 형식을 사용하면 됩니다. 하지만 tbar에 추가 버튼과 쿼리 검색 조건을 넣으면 이렇게 됩니다. 또한 작동합니다. 적어도 기능은 구현됩니다.
그러나 가장 당연한 행동, 즉 사용자를 바보로 생각하고 모든 것을 바보처럼 행하는 것을 고려하면 모든 것이 고객을 위한 것입니다. 예를 들어, 포인트 앤 슛 카메라와 포인트 앤 슛 설치 시스템은 매우 인기가 있습니다.

그럼 신다야를 위해서 실행버튼과 쿼리 검색조건을 각각 2개의 tbar에 어떻게 넣어야 할까요?
인터넷에 그리드에 두 개의 tbar를 추가하는 코드가 있습니다. 프로젝트에 대해 걱정하는 신규 사용자를 위해 Xindaya를 달성하는 간단한 방법이 있습니다.
가장 간단한 방법은 청취자 방식을 사용하는 것입니다.

먼저 패널과 함께 제공되는 tbar에 추가 버튼 등 실행 버튼을 배치합니다.
둘째: 툴바를 맞춤 설정하고 쿼리 검색 조건을 입력하세요.
셋째: 패널에 포함된 tbar를 모니터링하도록 툴바를 사용자 정의합니다[즉, 두 번째 모니터링이 첫 번째입니다]

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

tbar:new Ext.Toolbar({items:['-']}),
//버튼 도구 모음 아래에 쿼리 도구 모음 작성
listeners: {
render: function(){
queryBar.render(this.tbar)
}
}

//우리 프로젝트 부분 주요 코드는 다음과 같습니다.
mnguser.panel = new Ext.Panel({
id :'mngmenuDiv',
title : 'User Management',
지역 : '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, {
layout : ' border',
initComponent : function() {
this.content = mnguser.panel;
menuOpt(this.content); //내장된 tbar에 실행 버튼을 추가합니다.
Ext. apply(this, {
items : [this.content]
})
mnguser.body.superclass.initComponent.call(this)
}
});

효과는 다음과 같습니다.