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

ExtJS布局与TabPanel实践

最新推荐文章于 2023-03-18 17:31:43 发布

最新推荐文章于 2023-03-18 17:31:43 发布 · 180 阅读

文章标签：

#EXT #HTML #工作

本文介绍如何使用ExtJS框架中的TabPanel组件实现复杂的页面布局。具体包括配置TabPanel属性，设置不同区域的布局方式，并展示如何通过xtype属性启用特定的功能，如门户样式布局。此外，还介绍了如何加载和显示动态内容。

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 // } ] });