ExtJS 创建Window实例二

Ext.onReady(function(){
 /**
  * 描述,在window上添加其他的组件,并且对组件进行相关的操作
  */
   var win=new Ext.Window({
      id:'myWin',
      title:'窗体',
      height:400,
      width:"40%",
      closable:false,//禁用关闭按钮
      draggable:false,//紧张拖拽
      resizable:false,//固定大小,不允许拉伸
      collapsible:true,//可以折叠
      bodyStyle:'background:#fff; padding:10px;',
//      html:'窗口内容'
      items:[{
      id:'panel_01',
      //可以通过xtype 创建组件
      xtype:'panel',
      title:'panel',
      width:"100%",
      height:200,
      html:'panel 内容'
      },{
      	xtype:'button',
      	text:'按钮',
      	//点击按钮会触发handler的处理函数
      	handler:function(btn){
      		alert(btn.text)
      	}
      }]
   })
   win.show();
   //先隐藏起来,继续下面的操作
   win.hide();
   
   var win2=new Ext.window.Window({
     id:'myWin2',
     title:"标题",
     height:400,
     width:400,
     //渲染到页面
     rendTo:Ext.getBody(),
     tbar:[{
     	text:' 按钮一',
     	handler:function(btn){
     		//通过Ext提供的方法获取制定id的组件
     		alert(Ext.getCmp("myWin2").title)
     	}
     },{
    	text:' 按钮二',
    	handler:function(btn){
    		//通过xtype或者是选择器选择上级的组件
    		alert(btn.up("window").title)
     	}
     },{
     	text:' 按钮三',
     	handler:function(btn){
     		//直接访问上级组件
     		alert(btn.ownerCt.ownerCt.title)
     	}
     }]
   })
   win2.show()
   

});

你可能感兴趣的:(extjs,window,javascript,js,javaweb,ext,javascript)