Extjs - Panel组件

1.常用的参数:

//配置参数(只列举部分常用参数)
1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false
3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false
4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]
7.buttonAlign

ooter中按钮的位置,枚举值为:"left","right","center",默认为right
8.collapsible:设为true,显示右上角的收缩按钮,默认为false
9.draggable:true则可拖动,但需要你提供操作过程,默认为false
10.html:主体的内容
11.id:id值,通过id可以找到这个组件,建议一般加上这个id值
12.width:宽度
13.height:高度
13.title:标题
14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.
15.applyTo:(id)呈现在哪个html元素里面
16.contentEl:(id)呈现哪个html元素里面,把el内的内容呈现
17.renderTo:(id)呈现在哪个html元素里面
//关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):

2.可拖动的panel 实现详解:

//下面创建一个允许拖动的panel,但是拖动的结果不能保存
var p=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
    floating: true,//true
    frame: true,//圆角边框
    width: 400,
    height: 200,
    draggable:true
}).show();//在这里也可以不show()


但是还不能拖到其他的地方,我们需要改写draggable:
draggable: {
        insertProxy: false,//拖动时不虚线显示原始位置

        onDrag : function(e){
            var pel =
this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);//获取拖动时panel的坐标
        },
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);//移动到最终位置
        }
    }


实现了可保存的拖动,如图:

拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:
var s =
this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
//shadow的realign方法的四个参数,改变shadow的位置大小属性
最后完整的代码如下:
var p=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    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工具栏

//添加下面的代码到panel配置参数中
tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],
//id控制按钮,handler控制相应的事件


你可能感兴趣的:(ext,Panel)