Ext中Resizable的使用方法

ResizableExample = {
init: function(){
var basic = new Ext.Resizable('basic', {
width: 200,
height: 100,
minWidth:100,
minHeight:50
//,pinned: true//是否隐藏外框
,animate:true//拖动时渐进式
,easing: 'backIn'//配合上个属性animate为true使用
,duration:.35//动画效果的持续时间,默认.35
,transparent:true
,handles: 'all'
,widthIncrement:50//每次拖动的单位,还有height
,draggable:true
});
var wrapped = new Ext.Resizable('wrapped', {
wrap:true,
//pinned:true,
minWidth:50,
minHeight: 50
,preserveRatio: true//按比例缩放
,transparent:true//是否有外框
});
/*------------------------------------------------------------------------------------*/
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:100,
minHeight: 50,
preserveRatio: true,
handles: 'all',//能拖动的面
/*
'n' north
's' south
'e' east
'w' west
'nw' northwest
'sw' southwest
'se' southeast
'ne' northeast
'all' all
*/
draggable:true
,dynamic:true//拖动的事后是否显示线,默认为false
});
var customEl = custom.getEl();
// move to the body to prevent overlap on my blog
document.body.insertBefore(customEl.dom, document.body.firstChild);

customEl.on('dblclick', function(){
customEl.hide(true);
});
customEl.hide();

Ext.get('showMe').on('click', function(){
customEl.center();
customEl.show(true);
});
/*------------------------------------------------------------------------------------*/
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值