ExtJS布局：制作后台管理布局

一个后台管理页面大概头部、左侧导航、右侧的在线用户（可有可无）和状态栏（不是必须）

头部一般放一些logo、登陆用户信息和提醒事项等

我上面给出的这个图片就是我用ExtJS实现的一个后台管理页面布局，源代码如下：

Ext.onReady(function () {

 Ext.create(Ext.container.Viewport, {

 layout: border,

 items: [{

 region: north,

 html:  h1 Logo /h1 ,

 border: false,

 height: 50,

 margins: 0 0 0 0

 }, {

 region: west,

 collapsible: true,

 split: true,

 id: MainMenu,

 title: 系统导航,

 width: 150,

 layout: accordion,

 items: [

 title: 系统菜单,

 layout: fit,

 items: [

 xtype: treepanel,

 border: 0,

 rootVisible: false,

 root: {

 expanded: true,

 children: [

 { id: "01", text: "用户管理", leaf: true, href: # },

 { id: "02", text: "密码修改", leaf: true, href: # }

 // could use a TreePanel or AccordionLayout for navigational items

 }, {

 region: south,

 collapsible: false,

 html: 状态栏,

 split: false,

 height: 22

 }, {

 region: east,

 title: 在线用户,

 collapsible: true,

 split: true,

 width: 150

 }, {

 region: center,

 xtype: tabpanel, 

 id: MainTabPanel,

 activeTab: 0, 

 items: {

 title: 首页,

 html:  h1 欢迎使用 /h1 input type="button" value="添加新标签" / 

 bindNavToTab("MainMenu", "MainTabPanel");

function bindNavToTab(accordionId, tabId) {

 var accordionPanel = Ext.getCmp(accordionId);

 if (!accordionPanel) return;

 var treeItems = accordionPanel.queryBy(function (cmp) {

 if (cmp cmp.getXType() === treepanel) return true;

 return false;

 if (!treeItems || treeItems.length == 0) return;

 for (var i = 0; i treeItems.length; i++) {

 var tree = treeItems[i];

 tree.on(itemclick, function (view, record, htmlElement, index, event, opts) {

 if (record.isLeaf()) {

 // 阻止事件传播

 event.stopEvent();

 var href = record.data.href;

 if (!href) return;

 // 修改地址栏

 window.location.hash = # + href;

 // 新增Tab节点

 CreateIframeTab(tabId, record.data.id, record.data.text, href);

function CreateIframeTab(tabpanelId, tabId, tabTitle, iframeSrc) {

 var tabpanel = Ext.getCmp(tabpanelId);

 if (!tabpanel) return; //未找到tabpanel，返回

 //寻找id相同的tab

 var tab = Ext.getCmp(tabId);

 if (tab) { tabpanel.setActiveTab(tab); return; }

 //新建一个tab，并将其添加到tabpanel中

 //tab = Ext.create(Ext.tab.Tab, );

 tab = tabpanel.add({

 id: tabId,

 title: tabTitle,

 closable: true,

 html:  iframe src=" + iframeSrc + " frameborder="0" /iframe 

 tabpanel.setActiveTab(tab);

}

来源：http://youring2.cnblogs.com/ 声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。 转载：http://www.cnblogs.com/youring2/archive/2013/03/05/2943846.html
从零开始实现放置游戏（九）——实现后台管理系统（7）地图选择控件 前面做了地图怪物的添加，删除，查询等功能。但添加怪物的时候，需要选择怪物所在地图。前几张的源代码中，我忘了把这部分改回去，所以如果想要成功添加，需要自己改一下html界面，手动填写怪物所在地图的ID。然而，我们配置的时候，地图ID并不是固定的，而是数据库自增的。所以这里最好做成一个弹窗，点击后弹出一个地图列表，让我们手动选择怪物所在地图。 本章我们就实现这样一个弹窗控件，实现对地图的选择。后面如果有选择怪物，选择装备等需求，都可照猫画虎。
基于js开发的一个h5页面可视化布局器 前段时间笔者一直忙于数据可视化方面的工作，比如如何实现拖拽式生成可视化大屏，如何定制可视化图表交互和数据导入方案等，这块需求在B端企业中应用非常大，所以非常有探索价值。 本篇文章并非和数据可视化相关，而是通过抽象技术底层，将其应用于H5页面可视化搭建上，通过技术的手段实现拖拽式生成H5页面。这块也有非常多的应用场景，比如我们需要开发一个移动端网站，一个H5营销页面，H5活动页面等，如果有这样的傻瓜式拖拽的工具生成H5页面，将会极大的提高我们的工作效率。 接下来笔者将对h5页面可视化编辑器做详细的演示
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
ExtJS 的布局 容器中可以放多个组件，甚至可以放其他容器 布局负责帮助容器，管理其中的组件。 容器中的layout选项（属性）用于控制容器的布局。 1.垂直布局与水平布局