Ext.Panel 어셈블리 상세 정보

2712 단어
Ext.onReady(function(){
    var panel = new Ext.Panel({
        renderTo :  Ext.getBody(),
        height : 200,
        width : 400,
        title : " ",
        html : "Welcome",
        tbar : [
            new Ext.Toolbar.Button({ text : " 1"}),
            { text : " 2"}
        ],
        fbar : [{ text : " 1"},{ text : " 2"}],
        collapsible : true,
        autoScroll : true,
        contentEl : 'innerContent',
        floating : true,
        x : 100,
        y : 100,
        draggable: {
            insertProxy: false,
            onDrag : function(e){
                var pel = this.proxy.getEl();
                this.x = pel.getLeft(true);
                this.y = pel.getTop(true);

                var s = this.panel.getEl().shadow;
                if (s) {
                    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                }
            },
            endDrag : function(e){
                this.panel.setPosition(this.x, this.y);
            }
    },
    tools:[
        {id:"save"},
        {id:"help"},
        {id:"up"},
        {    
            id:"close",
            handler:function(){
                Ext.MessageBox.alert(" "," ")
            }
        }]
    });
 })
패널 구성 요소의 하위 구성 요소는 TabPanel,GridPanel,FormPanel,TreePanel 구성 요소를 포함하기 때문에 패널 구성 요소의 설정 매개 변수와 관련된 속성, 방법을 소개할 필요가 있습니다.
//매개변수 구성 (일부 공통 매개변수만 나열)
1.autoLoad: 유효한 URL 문자열, 그 URL의 body에 있는 데이터를 불러옵니다. 그러나 스타일과 js 제어가 없고 html 데이터만 있을 수 있습니다.
2.autoScroll:true로 설정하면 내용이 넘칠 때 스크롤 바가 생성됩니다. 기본값은false입니다.
3.autoShow:true 디스플레이를'x-hidden'으로 설정하는 요소입니다. 기본값은false입니다.
4.bbar: 밑줄, 주체에 표시,//코드: bbar: [{text:'하단 도구 모음bottomToolbar'}],
5.tbar: 위쪽 줄, 주체에 표시,//코드: tbar: [{text:'위쪽 도구막대 topToolbar'}],
6.buttons:단추 집합,footer에 자동으로 추가(footer 매개 변수, 주체 밖으로 표시)//코드:buttons:[{text:"단추는footer에 있습니다"}]
7.buttonAlign:footer에서 단추의 위치, 열거값: "left", "right", "center", 기본값은 right
8.collapsible:true로 설정하고 오른쪽 상단의 수축 단추를 표시합니다. 기본값은false입니다.
9.draggable:true는 드래그할 수 있지만, 작업 과정을 제공해야 합니다. 기본값은false입니다.
10.html: 주체의 내용
11.id:id값, id를 통해 이 구성 요소를 찾을 수 있습니다. 일반적으로 이 id값을 추가하는 것을 권장합니다.
12.width: 너비
13. Height: 높이
13. title: 제목
14. titleCollapse:true로 설정하면 제목 표시줄의 어느 곳이든 수축할 수 있습니다. 기본값은false입니다.
15. applyTo: (id) 어떤 html 요소에 나타나는지
16.contentEl: (id) 어떤 html 요소 안을 나타내고 엘 안의 내용을 보여줍니까
17.renderTo: (id) 어떤 html 요소에 나타나는지
//이 세 가지 매개 변수의 차이(개인적으로:el,applyTo와RenderTo는 to를 html 요소에 강조하고,contentEl은 html 요소를 ext 구성 요소에 넣는다)

좋은 웹페이지 즐겨찾기