ExtJS学习笔记（三） TreePanel(3)

extjs中的Panel组件自己试过的比较全的属性定义！

 

/* * Ext JS Library 2.2.1 * Copyright(c) 2006-2009, Ext JS, LLC. * [email protected] * * http://extjs.com/license */ Ext.onReady(function(){ var p = new Ext.Panel({ title: 'My Panel', collapsible:true, renderTo: 'container', width:400, autoShow:true, //.panel工具栏 //添加下面的代码到panel配置参数中 //id控制按钮，handler控制相应的事件 tools:[{id:"save"}, {id:"help"}, {id:"up"}, {id:"print",handler:function(){ window.print(); } }, {id:"close",handler:function(){ Ext.MessageBox.alert("tool lan","close!") } } ], // 带顶部，底部，脚部工具栏的panel //tbar:[{text:"button1"},{text:"button2"}], //顶部工具栏 tbar:[{text:"button1", handler:function(){ Ext.MessageBox.alert("I am button", "I button1 click !")} }, {text:"button2"}], bbar:[{text:"button1"},{text:"button2"}], //底部工具栏 //buttons:[{text:"按钮1",URL:'http://www.baidu.com'},{text:"按钮2"}], //footer部工具栏 x: 100, y: 100, renderTo: Ext.getBody(), floating: true, draggable: { insertProxy: false,//拖动时不虚线显示原始位置 onDrag : function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);//获取拖动时panel的坐标 var s = this.panel.getEl().shadow; //shadow的realign方法的四个参数，改变shadow的位置大小属性 if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } }, endDrag : function(e){ this.panel.setPosition(this.x, this.y);//移动到最终位置 } }, html: Ext.example.bogusMarkup }); });