var 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);
Ext中Resizable的使用方法
最新推荐文章于 2021-11-04 13:40:31 发布