- 浏览: 108716 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
qiqibaba1990:
JAVA与JS的数据交互 -
月氏城下:
为什么是5个,不是9个吗?
JSP五大内置对象 -
mida:
有点文字时不时更好了。
JAVA与JS的数据交互 -
pxx199248:
收藏楼,不错
常用JS驗證
Fit布局
在Fit布局中,子元素将自动填满整个父容器。注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。 示例代码: border布局 border布局:border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在在其items中指定使用region参数为其子元素指定具体位置。 注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大,center区域就变小了。 参数 split:true 可以调整除了center四个区域的大小。 参数 collapsible:true 将激活折叠功能, title必须设置,因为折叠按钮是出现标题部分的。 center 区域是必须使用的,而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中,当指定布局为border时,没有指定center区域时,会出现报错信息。 示例代码: accordion布局 accordion布局:accordion布局也称手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。 示例代码: Card布局 Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候,我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外,如果面板中显示的是FORM布局,我们在点击下一个面板的时候,处理FORM中提交的元素,通过AJAX将表单中的内容保存到数据库中或者SESSION中。 下面的示例代码展示了一个基本的Card布局,布局中并没有包含form元素,具体情况,还要根据实际情况进行处理: anchor布局 anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。 anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如 anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25% anchor:'-300 -200',表示组件相对于父容器右边距为300,相对于父容器的底部位200 anchor:'-250 20%',混合模式,表示组件党对于如容器右边为250,高度为父容器的20% 示例代码 var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
Ext.define('DataWindow',{
extend : 'Ext.window.Window',
title : 'MHZG.NET---Fit布局示例代码',
width:550,
layout : 'fit',
items : {
xtype : 'gridpanel',
store: store,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}]
}
});
Ext.onReady(function(){
var win = Ext.create("DataWindow",{
x:10,
y:20,
});
});
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'MHZG.NET-Border Layout',
layout: 'border',
x:20,
y:20,
items: [{
title: 'South Region is resizable',
region: 'south',
xtype: 'panel',
height: 80,
split: true,
margins: '0 5 5 5'
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0',
html:'在Extjs4中,center区域必须指定,否则会报错。'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
x:20,
y:20,
layout:'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});
var navigate = function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel', {
title: 'MHZG.NET-Card布局示例',
width: 300,
height: 202,
layout: 'card',
activeItem: 0,
x:30,
y:60,
bodyStyle: 'padding:15px',
defaults: {border: false},
bbar: [{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}],
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},
{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},
{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "MHZG.NET-AnchorLayout Panel",
layout: 'anchor',
x:60,
y:80,
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: '75% Width and 25% Height',
anchor: '75% 25%'
},{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 30%'
}]
});
发表评论
-
Record 与 Store 说明
2012-04-27 17:42 8881、Record 首先需要明确是,ExtJS中有一个 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2012-04-23 15:38 746Ext中包含了几个以get开头的方法,这些方法可以用来得到文档 ... -
带验证码登录页面
2012-04-05 10:17 1691Ext.onReady(function(){ ... -
renderTo和applyTo的区别
2012-03-26 10:17 2399RenderTo <head> <ti ... -
Ext.FormPanel表单(实例)
2012-03-26 09:25 2009<!DOCTYPE HTML PUBLIC " ... -
ExtJS Combo学习,相关参数属性解析
2012-03-26 09:17 2879天我们接着深入解析表单元素中ComboBox组件的使用。会涉及 ... -
Ext.Window例子及簡單Ext.menu.Menu
2012-03-26 09:18 1171<!DOCTYPE HTML PUBLIC " ... -
Ext.Panel() 拖动效果
2012-03-23 10:58 6852<!DOCTYPE HTML PUBLIC " ... -
Ext.MessageBos.show()进度条例子
2012-03-23 10:56 1392<!DOCTYPE HTML PUBLIC " ... -
ExtJs 控件详解
2012-03-22 16:11 3237ExtJs 控件详解 1.Ext.M ... -
ExtJS 控件记录
2012-03-22 16:02 770Window - collapsible:true ... -
Aptana安裝Extjs插件
2012-03-22 12:09 1197打開Aptana Help->Install New ...
相关推荐
适用于各种布局的下拉刷新,是一个非常好用的demo
ios项目源代码 各种布局控件使用及扩展视图自定义UITableViewCell等源码合集: DTCoreText-1.6.10在UITextView上实现十分丰富的文字效果 ios三级展开列表TQMultistageTableView_10802 ios个性化每个...
下载可直接运行,有fragment,pupoWindow等各种布局风格。
bootstrap各种布局模板(html文件)。下载后解压,打开文件夹找到index.html文件查看。然后根据自己想要的在文件夹中找到对应的文件用编辑器打开查看即可。
学习div+css的必备材料 div+css实现的各种布局
18个ios项目源代码各种布局控件使用及扩展视图自定义UITableViewCell。 实现各种样式的表格输入界面、自定义TabBar的文字、颜色和图片加箭头、列表个性化列表项、IOS欢迎界面等。 18个ios项目源代码各种布局控件使用...
Android 上下滑动引导页 扩展性强 支持各种布局
java新手可能会为各种组件的布局头疼,我就找了一篇相关的文章跟大家分享一下,希望对某些人有一定的帮助。
android实现滑动控制、速度控制、各种布局、自定义组件.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
代码为仿IOS水滴版Listview的实例代码,有问题请博客留言:http://blog.csdn.net/qq_24100349/article/details/48547713
RecyclerView实现不同的布局,运用不同的适配器进行实现。具体实现内容请看这个http://t.csdn.cn/81k5f
很好的布局表单源码演示,可直接显示,适用于初学者,希望对你有所帮助!
AutoLinearLayout, 在行和列中自动( Android ),排列视图的自定义布局 AutoLinearLayout 自动排列行和列视图的自定义布局。 负责填充。边距。重力和布局子重力。 用法要使用 AutoLinearLayout,请将模块添加到项目中...
属于android工具包,包含scrollview,listview,spandlistview,gridview等布局的下拉刷新,下拉加载更多
public void onoffClick View v { TODO Auto generated method stub boolean isCheacked Switch v isChecked ; if isCheacked { Toast makeText OnOffActivity this "开启"...
android 5.0 的几种布局和listpopupwindow popuptheme collapsing drawernavigation....
layout-demo:CSS的各种布局
各种布局形式 Column垂直布局 效果 源代码 import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { //...
html static布局完美布局支持各种浏览器,在各种浏览器中都能完美布局。。。