- 浏览: 385501 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (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 730ExtJs_demo -
第六章-ExtJs-Form
2010-07-14 13:15 1000Form 本章任务 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 2140PagingToolbar 本章任务 1.PagingTo ... -
第二章-ExtJs-grid
2010-07-14 13:07 587grid 本章任务 1.grid /** * 页面加 ... -
第一章-ExtJs-面向对象
2010-07-14 13:03 1096ExtJs面向对象 本章任务 1.ExtJs面向对象 ... -
extjs_pluin_eclipse
2010-07-08 20:34 441spket-1.6.18.zip,eclipse插件.. -
extjs_prepare
2010-07-08 20:24 603一、安装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框架中使用...