Extjs 对tabPanel中的第一个Panel进行布局让里面的面板具有拖拽效果

最新推荐文章于 2023-06-17 22:56:23 发布

原创最新推荐文章于 2023-06-17 22:56:23 发布 · 5.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #html #border #layout #tabs #任务

Ext JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用 ExtJS 框架实现的 TabPanel 动态布局示例，展示了如何通过配置参数实现不同的面板布局，并且详细说明了各个面板的功能和展示内容。

var tabs= new Ext.TabPanel({ id:'tab', region: 'center', // a center region is ALWAYS required for border layout deferredRender: true, activeTab: 0, // first tab initially active enableTabScroll:true, plain:true, Frame:true, layoutConfig:{ animate:true }, items: [ /*对TabPanel中的第一个Panel进行布局 xtype:'portal'面板就具有自动拖拽效果 */ { title:'工作提醒', layout:'border', items: [{ xtype:'portal', region:'center', margins:'0 0 0 0', cmargins:'35 5 5 5', items: [ { columnWidth:.33, style:'padding:10px 10px 10px 10px', items: [ { id:"PersonInfo", title: '个人信息', html: "<%=TableInfo %>" } , { id:"DevelopMentTaskInfo", title: '开发员近期任务进展', html: "<%=DevelopMentPanelInfo %>" } ] } , { columnWidth:.43, style:'padding:10px 10px 10px 10px', items: [ { id:"TaskChecked", title: '任务审核', html: "<%=ProjectManageTaskAuditPanelInfo %>" } ] }, { columnWidth:.23, style:'padding:10px 10px 10px 10px', items: [ { id:"CurrentDate", title: '当前日期', html: "<%=CurrentDate %>" }, { id:"NewsList", title: '公告栏', html: "" } ] } ] }] } // { // contentEl: 'center2', // title: '工作提醒', // closable: false, // html:"<%=TableInfo %>", // frame:true, // autoScroll: true // } ] });