fangyong2006
- 浏览: 385228 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (269)
- FY_UML (3)
- FY_JAVA (12)
- FY_JavaScript脚本 (7)
- FY_JSP (3)
- FY_Tapestry框架 (12)
- FY_Spring框架 (3)
- FY_Manager (5)
- FY_Junit(单元测试) (3)
- SERVER (14)
- FY_Struts2框架 (3)
- FY_SVN (2)
- FY_NoSQL (2)
- FY_jquery_sir (13)
- FY_hibernate_sir (8)
- FY_设计模式_sir (6)
- FY_Extjs_sir (10)
- FY_CI_sir (5)
- FY_Oracle_sir (11)
- FY_MySql_sir (10)
- FY_Hadoop_sir (3)
- FY_SOA_sir (1)
- 中文分词技术 (1)
- FY_Android (52)
- FY_架构 (2)
- FY_PhoneGap (2)
- FY_Webstorm (5)
- FY_Sencha Touch (3)
- HTML5应用快速开发 (1)
- FY_python (0)
- HADOOP (1)
- AI (0)
最新评论
-
antao592：
楼主，HkDataSourceWrapper中的getCurr ...
结合spring jdbc 实现分表分库的数据库访问构思 -
bonait：
不错，看看我的这个怎么样www.zipin168.com
So Easy京东商城 -
chenzheng8975：
...
So Easy京东商城 -
yzhenxing：
我导入demo后少com.google.android.gms ...
google地图demo -
echoaiya：
非常感谢~~
google地图demo
layout
本章任务
1.layout
app = {};
Ext.onReady(function() {
self.resizeTo(screen.availWidth, screen.availHeight);
self.moveTo(0, 0);
var navHandler = function(direction) {
// 这段程序可以包含控制导航步骤所需的业务逻辑。
// 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
// 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
// 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
// 可能需要要扩展CardLayout类。
Ext.Msg.alert(direction);
};
// var action = new Ext.Action({
// text : 'Action 1',
// handler : function() {
// Ext.example.msg('Click', 'You clicked on "Action 1".');
// },
// iconCls : 'blist'
// });
var handleAction = function(action) {
Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/xtheme-"+action+".css");
};
/**
* 顶部,工具栏
*/
var tbar = new Ext.Panel({
region : 'north',
height : 30,
tbar : [{
xtype : 'buttongroup',
items : [{
text : '系统首页',
iconCls : 'sysIndex',
iconAlign : 'top',
scale : 'medium'
}, {
text : '系统简介',
iconCls : 'synopsis',
iconAlign : 'top',
scale : 'medium'
}, {
text : '系统帮助',
iconCls : 'help',
iconAlign : 'top',
scale : 'medium'
}, {
text : '重新登录',
iconCls : 'syslogin',
iconAlign : 'top',
scale : 'medium'
}, {
text : '修改密码',
iconCls : 'changePwd',
iconAlign : 'top',
scale : 'medium'
}, {
text : '安全退出',
iconCls : 'sysLogout',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 刷新 ',
iconCls : 'refresh',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 后退 ',
iconCls : 'goBack',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 换肤 ',
iconCls : 'goBack',
menu : [{
text : 'orange',
handler : handleAction
.createCallback('orange')
}, {
text : 'red5',
handler : handleAction
.createCallback('red5')
}, {
text : 'silverCherry',
handler : handleAction
.createCallback('silverCherry')
}, {
text : 'gray',
handler : handleAction
.createCallback('gray')
}, {
text : 'blue',
handler : handleAction
.createCallback('blue')
}, {
text : 'calista',
handler : handleAction
.createCallback('calista')
}, {
text : 'indigo',
handler : handleAction
.createCallback('indigo')
}, {
text : 'slate',
handler : handleAction
.createCallback('slate')
}],
iconAlign : 'top',
scale : 'medium'
}]
}, {
xtype : 'buttongroup',
items : [{
text : ' 打印1 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印2 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印3 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印4 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}]
}]
});
/**
* 中间,选项卡
*/
var tablepanel = new Ext.TabPanel({
region : 'center'
});
app.addTab = function(obj) {
var tab = Ext.getCmp(obj.id);
if (tab) {
tablepanel.setActiveTab(tab);
} else {
var newTab = new Ext.Panel({
id : obj.id,
title : obj.innerHTML,
closable : true,
autoScroll : true,
html : ''
});
//var newTab = new Ext.Panel({title:'panel1',html:'panel1panel1panel1panel1panel1panel1panel1'});
switch (obj.id) {
case '2' :
newTab.html = '<iframe src="page/content_basedate.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '3' :
newTab.html = '<iframe src="page/content_quality.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '4' :
newTab.html = '<iframe src="page/content_stone.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '5' :
newTab.html = '<iframe src="page/images.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '7' :
newTab.html = '<iframe src="page/content01.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '9' :
newTab.html = '<iframe src="page/content_custom.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
//板房管理
case '11' :
newTab.html = '<iframe src="page/content033.html"" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '12' :
newTab.html = '<iframe src="page/content034.html"" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '13' :
newTab.html = '<iframe src="page/content035.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '14' :
newTab.html = '<iframe src="page/content036.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '15' :
newTab.html = '<iframe src="page/content037.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '16' :
newTab.html = '<iframe src="page/content038.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '17' :
newTab.html = '<iframe src="page/content039.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
//库存管理
case '19' :
newTab.html = '<iframe src="page/content04.htm" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '20' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '21' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '22' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
// <!--报表管理(财务)-->
case '24' :
newTab.html = '<iframe src="page/content_repoet_month.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '25' :
newTab.html = '<iframe src="page/content_repoet_week.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '26' :
newTab.html = '<iframe src="page/content_repoet_gather.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '27' :
newTab.html = '<iframe src="page/content_salary.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
// <!--人事管理-->
case '29' :
newTab.html = '<iframe src="page/content_dept.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '30' :
newTab.html = '<iframe src="page/content_employment.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '31' :
newTab.html = '<iframe src="page/content_salary_level.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
}
tablepanel.add(newTab);
tablepanel.setActiveTab(newTab);
}
}
/**
* 底部,状态栏
*/
var wordCount = new Ext.Toolbar.TextItem('深圳市中鹏科技有限公司');
var charCount = new Ext.Toolbar.TextItem('操作员: ${session.userName}');
var clock = new Ext.Toolbar.TextItem('当前时间: 0');
var bbar = new Ext.Panel({
region : 'south',
height : 21,
bbar : new Ext.ux.StatusBar({
id : 'word-status',
// These are just the standard toolbar TextItems we created above.
// They get
// custom classes below in the render handler which is what gives
// them their
// customized inset appearance.
statusAlign : 'right', // the magic config
items : [
wordCount,
'-',
' '
+ ' '
+ ' '
+ ' '
+ ' ',
charCount,
'-',
' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' ',
clock]
}),
items : {
listeners : {
render : {
fn : function() {
Ext.fly(clock.getEl().parent())
.addClass('x-status-text-panel').createChild({
cls : 'spacer'
});
// Kick off the clock timer that updates the clock el
// every
// second:
Ext.TaskMgr.start({
run : function() {
Ext
.fly(clock.getEl())
.update('当前时间:'
+ new Date()
.format('Y年m月d日 g:i:s A'));
},
interval : 1000
});
},
delay : 100
}
}
}
});
/**
* 西边,菜单栏
*/
var accordion = new Ext.Panel({
region : 'west',
width : 200,
split : true,
collapsible : true,
layout : 'accordion',
layoutConfig : {
titleCollapse : true
},
// items : [{
// title : '期初管理',
// html : '<a href="#" onclick="javascript:app.addTab(this)" id="userManage">用户管理</a><br/><a href="#" onclick="javascript:app.addTab(this)" id="userManage">用户管理</a>'
// }, {
// title : '第二栏',
// html : '第二栏'
// }]
items : [{
title : '期初管理',
border : false,
iconCls : 'basedate',
contentEl : 'basedate'
}, {
title : '客户管理',
border : false,
iconCls : 'custom',
contentEl : 'custom'
}, {
title : '主管专栏',
border : false,
iconCls : 'manage',
contentEl : 'manage'
}, {
title : '板房管理',
border : false,
iconCls : 'factory',
contentEl : 'factory'
}, {
title : '库存管理(财务)',
border : false,
iconCls : 'lib',
contentEl : 'lib'
}, {
title : '报表管理(财务)',
border : false,
iconCls : 'report',
contentEl : 'report'
}, {
title : '人事管理',
border : false,
iconCls : 'hrm',
contentEl : 'hrm'
}]
});
/**
* 东边,属性类别
*/
var propertyGrid = new Ext.grid.PropertyGrid({
region : 'east',
width : 200,
source : {
"userName)" : "方勇",
"userPass" : "123456"
}
});
var viewPort = new Ext.Viewport({
layout : 'border',
items : [tbar, bbar, accordion, propertyGrid, tablepanel]
});
})
本章目标
1. 理解layout
分享到：
发表评论
-
ExtJs_demo
2010-07-14 13:32 727ExtJs_demo -
第六章-ExtJs-Form
2010-07-14 13:15 999Form 本章任务 1.Form //Ext.Quick ... -
第五章-ExtJs-layout
2010-07-14 13:13 886layout 本章任务 1.layout var ... -
第四章-ExtJs-tree
2010-07-14 13:11 874tree 本章任务 1.tree /** * ... -
第三章-extjs-PagingToolbar
2010-07-14 13:09 2139PagingToolbar 本章任务 1.PagingTo ... -
第二章-ExtJs-grid
2010-07-14 13:07 586grid 本章任务 1.grid /** * 页面加 ... -
第一章-ExtJs-面向对象
2010-07-14 13:03 1095ExtJs面向对象 本章任务 1.ExtJs面向对象 ... -
extjs_pluin_eclipse
2010-07-08 20:34 440spket-1.6.18.zip,eclipse插件.. -
extjs_prepare
2010-07-08 20:24 599一、安装Spket 第一种方法：网上更新方式 ...
相关推荐
第八讲:extjs4.0的Ajax [08]EXTJS4.0的Ajax.003.zip (53.77M)[08]EXTJS4.0的Ajax.002.zip [08]EXTJS4.0的Ajax.001.zip 第九讲:extjs4.0的core包和Ext类 [09]EXTJS4.0的core包和Ext类.003.zip (60.22M)[09]...
第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第二部分高级组件**************** 第十一讲: EXTJS4.0的高级组件Grid(上) 第十二讲: EXTJS4.0的MVC重构十一讲...
在开始使用ExtJS4进行开发之前，我们需要做一些基础的准备工作，确保开发环境已经搭建好，并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分主流浏览器，包括从IE6到最新版本的Chrome...
#### 第八讲: Extjs4.0的Ajax - **Ajax基础**：介绍了Ajax的基本概念及其在现代Web开发中的重要性。 - **使用Ext.Ajax**：详细讲解了Extjs提供的Ajax封装方法Ext.Ajax，包括发送请求、处理响应等功能。 - **错误...
第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 解决中文排序 8.2.5 格式化显示...
ExtJS是基于JavaScript的框架，主要用于开发富客户端Web应用程序。它提供了大量的UI组件和数据处理方法，使得开发者能够快速构建交互式的界面。由于提供的信息较为碎片化，下面将对提供的信息进行系统的梳理，总结出...
### Extjs FieldSet 两行两列布局解析 在Extjs框架中，`FieldSet`是一种常见的组件，常用于组织一组相关的表单字段，并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...
此外，Extjs社区也提供了大量的第三方扩展，进一步扩展了框架的能力。 #### 七、性能优化 随着应用规模的增长，性能优化变得越来越重要。Extjs提供了一系列工具和技术，帮助开发者提升应用的加载速度和响应性。...
Ext 2.x版本,一共8章： 第一章 起步 第二章 Ext概览 第三章 表单 第四章 按钮、菜单和工具栏 第五章 使用grid显示数据 第六章 Editor Grids（可编辑表格） 第七章 layout（布局） 第八章 Tree(树)
- **Layout Manager（布局管理器）**：ExtJS 提供多种布局方式来组织组件，如 Fit Layout、Border Layout、Card Layout 等。 - **Flex Layout**：一种常用的响应式布局方式，允许根据容器大小自动调整组件大小。 ##...
第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 解决中文排序 8.2.5 格式化显示...
- **下载**: 可以从官方网站或第三方资源网站下载 Extjs 框架。 - **环境部署**: 需要安装 Node.js 和 npm 等工具来搭建开发环境。 - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境，如 Spket IDE，它提供了...
1. **布局类**：包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...
### EXTJS4.0 教程实例~讲解 #### 知识点一：EXTJS4.0 中 Window 组件的创建与配置 **知识点概述**： EXTJS4.0 是一款用于构建现代化 Web 应用的强大框架。在该版本中，创建组件的方式有所更新，引入了 `Ext....
### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前，我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**： - 类型：布尔类型（true 或 false） - 描述：此属性...
- **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...
#### 第八章：TREEPANEL 树面板 **TREEPANEL** 用于创建层次结构的数据展示，常用于文件系统浏览或组织架构展示。 - **构造 TREEPANEL**： ```html <div id="tree-panel" xtype="treepanel" store="treeStore"> ...
第八章“Theming and Styling”关注在Ext JS 4应用中创建和定制主题及样式。这部分内容将帮助读者如何使应用界面更加符合设计要求，并具有更好的用户体验。 第九章“MVC with ExtJS4”讨论了在Ext JS 4框架中使用...