- 浏览: 3560766 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (1491)
- Hibernate (28)
- spring (37)
- struts2 (19)
- jsp (12)
- servlet (2)
- mysql (24)
- tomcat (3)
- weblogic (1)
- ajax (36)
- jquery (47)
- html (43)
- JS (32)
- ibatis (0)
- DWR (3)
- EXTJS (43)
- Linux (15)
- Maven (3)
- python (8)
- 其他 (8)
- JAVASE (6)
- java javase string (0)
- JAVA 语法 (3)
- juddiv3 (15)
- Mule (1)
- jquery easyui (2)
- mule esb (1)
- java (644)
- log4j (4)
- weka (12)
- android (257)
- web services (4)
- PHP (1)
- 算法 (18)
- 数据结构 算法 (7)
- 数据挖掘 (4)
- 期刊 (6)
- 面试 (5)
- C++ (1)
- 论文 (10)
- 工作 (1)
- 数据结构 (6)
- JAVA配置 (1)
- JAVA垃圾回收 (2)
- SVM (13)
- web st (1)
- jvm (7)
- weka libsvm (1)
- weka屈伟 (1)
- job (2)
- 排序 算法 面试 (3)
- spss (2)
- 搜索引擎 (6)
- java 爬虫 (6)
- 分布式 (1)
- data ming (1)
- eclipse (6)
- 正则表达式 (1)
- 分词器 (2)
- 张孝祥 (1)
- solr (3)
- nutch (1)
- 爬虫 (4)
- lucene (3)
- 狗日的腾讯 (1)
- 我的收藏网址 (13)
- 网络 (1)
- java 数据结构 (22)
- ACM (7)
- jboss (0)
- 大纸 (10)
- maven2 (0)
- elipse (0)
- SVN使用 (2)
- office (1)
- .net (14)
- extjs4 (2)
- zhaopin (0)
- C (2)
- spring mvc (5)
- JPA (9)
- iphone (3)
- css (3)
- 前端框架 (2)
- jui (1)
- dwz (1)
- joomla (1)
- im (1)
- web (2)
- 1 (0)
- 移动UI (1)
- java (1)
- jsoup (1)
- 管理模板 (2)
- javajava (1)
- kali (7)
- 单片机 (1)
- 嵌入式 (1)
- mybatis (2)
- layui (7)
- asp (12)
- asp.net (1)
- sql (1)
- c# (4)
- andorid (1)
- 地价 (1)
- yihuo (1)
- oracle (1)
最新评论
-
endual:
https://blog.csdn.net/chenxbxh2 ...
IE6 bug -
ice86rain:
你好,ES跑起来了吗?我的在tomcat启动时卡在这里Hibe ...
ES架构技术介绍 -
TopLongMan:
...
java public ,protect,friendly,private的方法权限(转) -
贝塔ZQ:
java实现操作word中的表格内容,用插件实现的话,可以试试 ...
java 读取 doc poi读取word中的表格(转) -
ysj570440569:
Maven多模块spring + springMVC + JP ...
Spring+SpringMVC+JPA
周末两天又要去参加婚礼,但是同学带的本科生居然系统没通过,叫我帮写一个。都怪自己,在帮他们调试的时候,
说自己在以前也写过两个项目,给本科生。系统要写两个的,一个打算用java swing写桌面的,一个打算用Struts2 + extjs + json+hibernate+mysql写web端。周2要交?两个晚上加一天+一个上午,天啊,挑战下自己也好吧。
下面是转来的,extjs做web的桌面,我喜欢extjs这么风格的,方便。
extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下,帮助记忆。
[list]absolute
顾名思义,在容器内部,根据指定的坐标定位显示
accordion
这个是最容易记的,手风琴效果
anchor
这个效果具体还不知道有什么用,就是知道注意一下
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
border
将容器分为五个区域:east,south,west,north,center
card
像安装向导一样,一张一张显示
column
把整个容器看成一列,然后向容器放入子元素时
fit
一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
form
是一种专门用于管理表单中输入字段的布局
table
按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列
[list]
- Ext.OnReady(function(){
- var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'accordion',
- width:500,
- height:200,
- layoutConfig:{animate:false},
- items:[
- {title:'元素1',html:''},
- {title:'元素2',html:''},
- {title:'元素3',html:''},
- {title:'元素4',html:''}
- ]
- }
- );
- });
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
- Ext.onReady(function() {
- var panel1 = new Ext.Panel({
- title: "panel1",
- height: 100,
- anchor: '-50',
- html: "高度等于100,宽度=容器宽度-50"
- });
- var panel2 = new Ext.Panel({
- title: "panel2",
- height: 100,
- anchor: '50%',
- html: "高度等于100,宽度=容器宽度的50%"
- });
- var panel3 = new Ext.Panel({
- title: "panel3",
- anchor: '-10, -250',
- html: "宽度=容器宽度-10,高度=容器宽度-250"
- });
- var win = new Ext.Window({
- title: "Anchor Layout",
- height: 400,
- width: 400,
- plain: true,
- layout: 'anchor',
- items: [panel1, panel2,panel3]
- });
- win.show();
- });
- Ext.onReady(function() {
- var button = Ext.get('show-btn');
- var win;
- button.on('click', function() {
- //创建TabPanel
- var tabs = new Ext.TabPanel({
- region: 'center', //border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间
- margins: '3 3 3 0',
- activeTab: 0,
- defaults: {
- autoScroll: true
- },
- items: [{
- title: 'Bogus Tab',
- html: "第一个Tab的内容."
- }, {
- title: 'Another Tab',
- html: "我是另一个Tab"
- }, {
- title: 'Closable Tab',
- html: "这是一个可以关闭的Tab",
- closable: true
- }]
- });
- //定义一个Panel
- var nav = new Ext.Panel({
- title: 'Navigation',
- region: 'west', //放在西边,即左侧
- split: true,
- width: 200,
- collapsible: true, //允许伸缩
- margins: '3 0 3 3',
- cmargins: '3 3 3 3'
- });
- //如果窗口第一次被打开时才创建
- if (!win) {
- win = new Ext.Window({
- title: 'Layout Window',
- closable: true,
- width: 600,
- height: 350,
- border : false,
- plain: true,
- layout: 'border',
- closeAction:'hide',
- items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局
- });
- }
- win.show(button);
- });
- });
- Ext.onReady(function() {
- var i = 0;
- var navHandler = function(direction) {
- if (direction == -1) {
- i--;
- if (i < 0) { i = 0; }
- }
- if (direction == 1) {
- i++;
- if (i > 2) { i = 2; return false; }
- }
- var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
- var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
- if (i == 0) {
- btnBack.disabled = true;
- }
- else {
- btnBack.disabled = false;
- }
- if (i == 2) {
- btnNext.value = "完成";
- btnNext.disabled = true;
- }
- else {
- btnNext.value = "下一步";
- btnNext.disabled = false;
- }
- card.getLayout().setActiveItem(i);
- };
- var card = new Ext.Panel({
- width: 200,
- height: 200,
- title: '注册向导',
- layout: 'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- border: false
- },
- bbar: [
- {
- id: 'move-prev',
- text: '上一步',
- handler: navHandler.createDelegate(this, [-1])
- },
- '->',
- {
- id: 'move-next',
- text: '下一步',
- handler: navHandler.createDelegate(this, [1])
- }
- ],
- items: [{
- id: 'card-0',
- html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
- }, {
- id: 'card-1',
- html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
- }, {
- id: 'card-2',
- html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
- }],
- renderTo: "container"
- });
- });
- Ext.onReady(function() {
- var win = new Ext.Window({
- title: "Column Layout",
- height: 300,
- width: 400,
- plain: true,
- layout: 'column',
- items: [{
- title:"width=50%",
- columnWidth:0.5,
- html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
- height:200
- },
- {
- title:"width=250px",
- width: 200,
- height:100,
- html:"固定宽度为250px"
- }
- ]
- });
- win.show();
- });
- Ext.OnReady(function(){
- var panel=new Ext.Panel(
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'fit',
- width:500,
- height:100,
- items:[
- {title:'子元素1'},
- {title:'子元素2'},
- {title:'子元素3'},
- {title:'子元素4'},
- {title:'子元素5'}
- ]
- }
- );
- });
- Ext.onReady(function() {
- var win = new Ext.Window({
- title: "form Layout",
- height: 150,
- width: 230,
- plain: true,
- bodyStyle: 'padding:15px',
- items:
- {
- xtype: "form",
- labelWidth: 30,
- defaultType: "textfield",
- frame:true,
- items:
- [
- {
- fieldLabel:"姓名",
- name:"username",
- allowBlank:false
- },
- {
- fieldLabel:"呢称",
- name:"nickname"
- },
- {
- fieldLabel: "生日",
- xtype:'datefield',
- name: "birthday",
- width:127
- }
- ]
- }
- });
- win.show();
- });
- Ext.onReady(function(){
- var panel=new Ext.Panel(
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'table',
- width:500,
- height:200,
- layoutConfig:{columns:3},//将父容器分成3列
- items:[
- {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
- {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
- {title:'元素3',html:'sdfsdfsdf'},
- {title:'元素4',html:''}
- ]
- }
- );
- });
发表评论
-
extjs4 ajax 同步设置
2012-08-31 13:42 1963// 把新的数据发送到服务端去,保存 E ... -
extjs4 bug查询
2012-08-25 15:57 5048Bug Fixes Fix tabs mouseo ... -
ExtJS4学习笔记八--Template的使用(转)
2012-08-24 13:32 1630http://hnhnhnhnhn.iteye ... -
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)
2012-08-22 12:44 2721ASP.NET+ExtJs4.0+表单提交submi ... -
EXTJS 4 form population with JSON read
2012-08-22 12:31 1854EXTJS 4 form population wi ... -
ExtJS Tree same parentNode
2012-08-19 17:22 1619ExtJS Tree same parentNode ... -
extjs4 一个很专业demo的博客
2012-08-19 16:57 1946http://extjstutorial.info/extjs ... -
ExtJs 4 – XTemplates
2012-08-18 20:34 1636Home › post › ExtJs 4 – XTe ... -
extjs4 tree操作
2012-08-18 20:25 5194Extjs tree 如何获得选中的节点 ... -
extjs4 打开pdf文件
2012-08-18 20:09 5882buttons: [{ text :'OPE ... -
cannot read property 'flex' of undefined
2012-08-18 13:45 7163Extjs的一个错误,谷歌浏览器捕获到的, 后来查了下原因, ... -
extjs4 初始化的一个方法
2012-08-17 21:03 1744initComponent : function() { ... -
extjs4 tree2
2012-08-16 15:26 1370http://blog.csdn.net/clskkk2222 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2012-08-16 13:36 1611Ext中的get、getDom、getCmp、g ... -
extjs4 学习博客
2012-08-12 16:03 1441http://blog.csdn.net/zhaoqilian ... -
extjs4 上传文件
2012-08-11 23:23 1607http://blog.sina.com.cn/s/blog_ ... -
extjs4 struts2 grid 新增、删除、修改
2012-08-11 20:22 2082http://blog.csdn.net/dys1990/ar ... -
extjs4做的grid,带分页,搜索 (转)
2012-08-11 14:32 2236【原创】extjs4做的grid,带分页,搜索 最 ... -
extjs4 tree
2012-08-11 09:27 1975How To Use ExtJS 4 TreePan ... -
ExtJs xtype
2012-08-10 21:45 1672ExtJs xtype一览 (2012-06-2 ...
相关推荐
资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...
Extjs布局实例
EXTJS学习,webform+mvc routeing extjs布局 适合初学者
ExtJS布局是构建用户界面的关键部分,特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局,一种非常灵活的布局方式,可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器(如Panel)...
Extjs 布局生成器,可以生产各布局查看布局代码
### ExtJS布局类型 #### 1. **Column Layout** 文件中的示例使用了`column`布局,这是ExtJS中的一种常用布局方式,用于将子元素按列排列。例如,在代码中,可以看到一个`Ext.Panel`对象被创建,并指定了`layout:'...
很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...
### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架,用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一,它可以帮助开发者有效地组织UI组件,使得用户界面既美观又实用。...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
### ExtJS布局全面讲解 #### 一、Border Layout(方位布局) **定义与特性:** - **定义**:Border布局由类`Ext.layout.BorderLayout`定义,布局名称为`border`,这是一种非常实用且常见的布局方式,适用于创建...
纯Extjs代码,对初学Ext有点点帮助
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
资源名称:ExtJS布局之border实例 中文WORD版内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看资源截图: 资源太大,传百度网盘了,链接在...
列布局(Column Layout)是ExtJS的一种布局策略,它允许你在同一行内创建多个并排显示的区域,每个区域可以包含不同的组件,如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单,使得数据输入和...
第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第...
左边菜单,右边是内容,北边是log图片 简单首页布局示例
在本篇博客中,我们将聚焦于"accordion布局"这一特性,它是ExtJS布局系统中的一种特殊形式。 Accordion布局,又称为折叠面板布局,允许在一个容器内放置多个面板,这些面板会像手风琴一样展开和折叠。这种布局模式...
用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。
用extjs4搭的一个简单布局框架