Ext初级入门

最新推荐文章于 2023-03-18 15:33:57 发布

原创最新推荐文章于 2023-03-18 15:33:57 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

Extjs 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Ext JS框架构建动态交互式面板和Tab面板，包括配置可拖拽、浮动、收起、标题折叠等功能，以及如何在顶部、底部设置工具栏和按钮，实现面板间的切换与操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
	var panel = new Ext.Panel({
        //el:'text',
        title:'MyPanel',
        collapsible:true,//可收缩
        floating:true,//可浮动
        draggable:true, //可拖拽
        html :'aaaaa',
        pageX :100,
        pageY :50,
        width: 500,
        height:300,
        titleCollapse: true,
        frame: true,//圆角边框
//        renderTo:Ext.getBody(),
        draggable: {
         insertProxy: true,//拖动时不虚线显示原始位置

         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;
             if (s) {
                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); //shadow的realign方法的四个参数，改变shadow的位置大小属性
             }
         },
         endDrag : function(e){
             this.panel.setPosition(this.x, this.y);
         }
         },
         tbar:[{text:"button1"},{text:"button2"}], //顶部工具栏
         bbar:[{text:"button1"},{text:"button2"}],  //底部工具栏
         buttons:[{text:"button1"},{text:"button2"}] //footer部工具栏
	});
	
	var tabs = new Ext.TabPanel({
	   renderTo: document.body,
	   height:100,
	   buttons:[{text:"back"},
	   	
	   		{text:"next"}]
	});
	
	tabs.add({
	   title:'title1',
	   html:'你好',
	   closable:true
	});
	
   tabs.add({
       title:'title2',
       html:'html2',
       closable:true
    });
    tabs.activate(0);
});