Ext.Panel

var panel = new Ext.Panel({
//该panel的ID号 一般加上留着查找备用
id:'panelteset',
//
x: 100,
   y: 100,
// 标题
title:'panel',
// 将panel绑定到dom中的固定id元素中
renderTo:'panel',
// 设置panel全部阴影 ,否则为1px边框
frame:false,
// 拖拽时设置是否浮动
floating: true,
// 自动加载内容 html页面只能加载 <body></body>
autoLoad:"http://localhost/exttest.php",
// autoLoad:{url:'http://www.bianceng.cn/webkf/Extjs/201011/20412.htm',scripts:true},
// panel通过右上角的倒三角可以收缩
collapsible:true,
// 点击标题栏的任何部分均能收缩
titleCollapse:true,
// panel工具栏
// id控制 按钮,handler控制相应的事件
// id的枚举值为:
// toggle (collapsable为true时的默认值)
// close
// minimize
// maximize
// restore
// gear
// pin
// unpin
// right
// left
// up
// down
// refresh
// minus
// plus
// help
// search
// save
// print
tools:[{id:'save'},{id:'minimize'},{id:'maximize'},{id:'close',handler:function(){alert('确定要关闭?');}}],
// 工具栏 看绑定事件
tbar:[{'text':'顶部工具栏1',handler:function(){Ext.MessageBox.alert('顶部工具栏1点击','通过handler绑定事件');}},
 {'text':'顶部工具栏2'}],
bbar:[{'text':'底部工具栏1'},{'text':'底部工具栏2'}],

// 当panel中内容溢出时 是否出现滚动条
autoScroll:true,
// autoShow:true,

// 位于panel中footer位置的底部按钮
buttons:[{text:"按钮位于footer",handler:function(){alert(1);}}],
// 决定底部按钮的布局
buttonAlign:'left',
// 允许panel拖拽
// draggable:true,

// 重写dragable 使其保存拖拽结果 好像写程序时不需要拖拽
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);//移动到最终位置
       }
   },
//    panel大小
width:500,
height:300,
// panel中的填充内容
html:"<input type='text' value='1111111'></input>"
});


具体的设置使用时可以查找 个人觉得写程序的会基本的几个属性设置和事件的绑定就行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值