博客园_lipan

ExtJs4 笔记（14） layout 布局

2011-12-27T00:24:00Z

本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。

一、absolute

这种方式的布局可以对子元素相对于父级容器控件进行绝对定位，它包含了x、y两个配置项用于定位。

我们来看看一个例子：

[Js]

//absolute
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div1',
width: 400,
height: 300,
layout: 'absolute',
items: [{
title: '面板1',
xtype: "panel",
html: "子元素1",
width: 200,
height: 100,
x: 50,
y: 50

}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
width: 200,
height: 100,
x: 100,
y: 80

}]
});

效果如下：

二、accordion

有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。

[Js]

//accordion
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div2',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '配置按钮被点击。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1"

}, {
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'panel3',
title: '面板3',
xtype: "panel",
html: "子元素3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'div2',
text: "打开第三页",
handler: function () {
Ext.getCmp('panel3').expand(true);
}
});

效果如下：

三、anchor

这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。

[Js]

//anchor
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div3',
width: 400,
height: 300,
layout: 'anchor',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '配置按钮被点击。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1",
anchor: '80% 20%'

}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
anchor: '-50 -200'
}, {
title: '面板3',
xtype: "panel",
html: "子元素3",
anchor: '100% 30%'
}]
});

效果如下：

四、border

这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式。

[Js]

//border
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div4',
width: 400,
height: 300,
layout: 'border',
defaults: {
split: true, //是否有分割线
collapsible: true, //是否可以折叠
bodyStyle: 'padding:15px'
},
items: [{
region: 'north', //子元素的方位：north、west、east、center、south
title: '北',
xtype: "panel",
html: "子元素1",
height: 70
}, {
region: 'west',
title: '西',
xtype: "panel",
html: "子元素2",
width: 100

}, {
region: 'east',
title: '东',
xtype: "panel",
html: "子元素2",
width: 100

}, {
region: 'center',
title: '主体',
xtype: "panel",
html: "子元素3"
}, {
region: 'south',
title: '南',
xtype: "panel",
html: "子元素4",
height: 70
}]
});

效果如下：

五、card

这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。我们可以定义翻页按钮来控制当前处于活动状态的子元素。

[Js]

//card
var cardNav = function (incr) {
var l = Ext.getCmp('cardPanel').getLayout();
var i = l.activeItem.id.split('card')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
Ext.getCmp('cardPrev').setDisabled(next === 0);
Ext.getCmp('cardNext').setDisabled(next === 2);
};
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div5',
width: 400,
height: 300,
layout: 'card',
activeItem: 1, //默认活动项
id: 'cardPanel',
items: [{
id: 'card0',
title: '面板1',
xtype: "panel",
html: "子元素1"

}, {
id: 'card1',
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'card2',
title: '面板3',
xtype: "panel",
html: "子元素3"
}],
bbar: ['->', {
id: 'cardPrev',
text: '« 前一页',
handler: Ext.Function.bind(cardNav, this, [-1])
}, {
id: 'cardNext',
text: '后一页 »',
handler: Ext.Function.bind(cardNav, this, [1])
}]

});

效果如下：

六、column

这个布局把子元素按照列进行划分。

[Js]

//column
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div6',
width: 400,
height: 300,
layout: 'column',
defaults: { //设置没一列的子元素的默认配置
layout: 'anchor',
defaults: {
anchor: '100%'
}
},
items: [{
columnWidth: 4 / 10, //设置列的宽度
items: [{
title: '面板1',
border: false,
html: '子元素1'
}, {
title: '面板2',
border: false,
html: '子元素2'
}]
}, {
width: 120,
items: [{
title: '面板3',
border: false,
html: '子元素3'
}]
}, {
columnWidth: .40,
items: [{
title: '面板4',
border: false,
html: '子元素4'
}]
}]

});

效果如下：

七、fit

这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。

[Js]

//fit
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div7',
width: 400,
height: 300,
layout: 'fit',
items: [{
title: '面板',
html: '子元素',
border: false
}]
});

效果如下：

八、table

这个布局用表格定位的方式去组织子元素，我们可以像表格一样设置rowspan和colspan。

[Js]

//table
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div8',
width: 400,
height: 300,
layout: {
type: 'table',
columns: 4
},
defaults: { frame: true, width: 70, height: 50 },
items: [
{ html: '元素1', rowspan: 3, height: 150 },
{ html: '元素2', rowspan: 2, height: 100 },
{ html: '元素3' },
{ html: '元素4' },
{ html: '元素5', colspan: 2, width: 140 },
{ html: '元素6' },
{ html: '元素7' },
{ html: '元素8' }
]
});

效果如下：

九、vbox

这个布局把所有的子元素按照纵向排成一列。

[Js]

//vbox
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div9',
width: 400,
height: 300,
layout: {
type: 'vbox',
pack: 'start', //纵向对齐方式 start：从顶部；center：从中部；end：从底部
align: 'stretchmax' //对齐方式 center、left、right：居中、左对齐、右对齐；stretch：延伸；stretchmax：以最大的元素为标准延伸
},
defaults: {
xtype: 'button'
},
items: [{
text: '小按钮',
flex: 1 //表示当前子元素尺寸所占的均分的份数。
}, {
xtype: 'tbspacer', //插入的空填充
flex: 3
},

{
text: '中按钮',
scale: 'medium'
}, {
text: '大按钮',
width: 120,
scale: 'large',
flex: 1
}]
});

效果如下：

十、hbox

跟vbox类似，只不过变成了横向的。

[Js]

//hbox
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div10',
width: 400,
height: 300,
layout: {
type: 'hbox',
pack: 'end',
align: 'middle' //对齐方式 top、middle、bottom：顶对齐、居中、底对齐；stretch：延伸；stretchmax：以最大的元素为标准延伸
},
defaults: {
xtype: 'button'
},
items: [{
text: '小按钮'
},{
text: '中按钮',
scale: 'medium'
}, {
text: '大按钮',
width: 120,
scale: 'large'
}]
});

效果如下：

作者：李盼（Lipan）
出处：[Lipan] （http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

本文链接

ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

2011-12-26T00:16:00Z

《回到系列目录

本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中，比如按钮、工具栏等，甚至可以直接通过通过右键打开（模拟右键菜单）；ext对绘图的支持可以让我们通过js来绘图；大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。

一、Ext.menu.Menu 菜单

1.菜单的定义

下面我们来定义一个菜单，它包括一个下拉列表，还有颜色选择器，日期选择器等菜单项。

[Js]

//下定义一个下拉列表
var combo = Ext.create('Ext.form.ComboBox', {
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: [[1, "张三"], [2, "李四"], [3, "王五"], [4, "赵六"]]
}),
displayField: 'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: '请选择..',
selectOnFocus: true,
width: 135
});

//这里是菜单的定义
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
combo,
{
text: '复选框',
checked: true
}, '-', {
text: '单选子菜单',
menu: {
items: [
'<b>请选择一个人名</b>',
{
text: '张三',
checked: true,
group: 'theme'
}, {
text: '李四',
checked: false,
group: 'theme',
checkHandler: function () {
Ext.MessageBox.alert("消息", "李四被选择！")
}
}, {
text: '王五',
checked: false,
group: 'theme'
}, {
text: '赵六',
checked: false,
group: 'theme'
}
]
}
}, {
text: '请选择一个日期',
menu: Ext.create('Ext.menu.DatePicker', {
handler: function (dp, date) {
Ext.MessageBox.alert('消息', '你选择了:' + date.format('Y-m-d'));
}
})
}, {
text: '选择一个颜色',
menu: Ext.create('Ext.menu.ColorPicker', {
handler: function (cm, color) {
Ext.MessageBox.alert('消息', '你选择了：' + color);
}
})
}
]
});

2.把菜单附加到面板工具栏

我们定义一个面板，然后通过刚刚定义的菜单实现菜单栏。

[Js]

//把菜单附加到工具栏上
var panel = new Ext.Panel({
renderTo: 'div1',
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
tbar: [{ text: "菜单", menu: menu}]
});

下面看看展示效果：

2.实现右键菜单

还是用第一步定义的菜单，现在我们通过右键事件的方式实现右键菜单：

[Js]

//定义右键菜单
Ext.getDoc().on('contextmenu', function (e, o) {
e.preventDefault();
menu.showAt(e.getXY());

//第二种写法：
//e.stopEvent();
//menu.showAt([e.getPageX(), e.getPageY()]);
});

单击右键，效果如下：

3.在ListView中定义右键菜单

这里我们借用第11篇的ListView,我们要实现当数据行右键单击时，弹出菜单的效果。

[Js]

在ListView中单击右键，效果如下：

二、Ext.draw.Component 绘图

Ext支持通过js的方式绘图，可以绘制的包括基本图形圆形、矩形等，还可以描绘路径，因为它支持SVG路径语法。

1.实现文本绘图

[Js]

Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
viewBox: false,
draggable: {
constrain: true, //允许拖动
constrainTo: Ext.getBody()
},
floating: true,
autoSize: true,
items: [{
type: 'text',
text: '图形化的文本',
fill: 'green',
font: '16px Arial',
rotate: {
degrees: 45
}
}]
});

通过上面的代码，我们可以展示出图片式文本，效果如下：

2.基本图形，路径绘图

我们先通过基本图形绘制一个圆形，一个长方形，最后通过路径语法绘制一个等腰三角形：

[Js]

var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
items: [{
type: 'circle', //园
fill: '#79BB3F',
radius: 100,
x: 100,
y: 100
}, {
type: 'rect', //矩形
width: 50,
height: 30,
fill: '#f00',
x: 0,
y: 0
}, {
type: "path",
path: "M100 0 L150 50 L200 0 Z", //路径
"stroke-width": "1",
stroke: "#000",
fill: "blue"
}]
});

Ext.create('Ext.Window', {
width: 230,
height: 250,
layout: 'fit',
items: [drawComponent]
}).show();

效果如下：

三、Ext.resizer.Resizer 大小变更

官方示例上作者说，他奶奶都会写这段代码，所以我也不想多讲了，应该很简单。控件的实现方式如下：

[Js]

Ext.onReady(function () {

var basic = Ext.create('Ext.resizer.Resizer', {
target: 'basic',
pinned: true, //是否显示调节边框
width: 200,
height: 100,
minWidth: 100,
minHeight: 50,
dynamic: true, //动态设置
preserveRatio: true, //当变更大小时，长宽比例是否固定
heightIncrement: 20, //单次变更，高度变更值
widthIncrement: 20,
transparent: false //是否彻底隐藏调节边框
});
});

效果如下：

本文链接

ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

2011-12-23T00:20:00Z

《回到系列目录

本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext.ux.statusbar.StatusBar用来展示当前的状态信息。

一、Ext.toolbar.Toolbar

工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。我们演示多个Ext.toolbar.Toolbar控件，然后附加到面板的不同位置。

1.在工具栏上添加菜单、按钮、搜索功能

我们这里借用上一篇所讲到的listview控件作为数据展示，把listview放入一个面板控件中，然后把工具栏添加到面板顶部，并且在工具栏中实现数据集的服务端搜索的功能。

首先我们定义一个数据模型和Store：

[Js]

Ext.define('Datas', {
extend: 'Ext.data.Model',
fields: [
{ name: 'IntData', type: 'int' },
{ name: 'StringData', type: 'string' },
{ name: 'TimeData', type: 'date' }
],
proxy: {
type: 'ajax',
url: 'Toolbar1Json',
reader: {
type: 'json',
root: 'rows'
}
}
});

var store = new Ext.data.Store({
model: 'Datas',
sortInfo: { field: 'IntData', direction: 'DESC' },
autoLoad: true
});
store.load();

服务端的json输出代码：

[C# Mvc]

public JsonResult Toolbar1Json(string keyword)
{

var rows = BasicData.Table.Take(10).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
});
if (!string.IsNullOrEmpty(keyword))
{
rows = rows.Where(x => x.IntData.ToString() == keyword || x.StringData.Contains(keyword) || x.TimeData.Contains(keyword));
}
var json = new
{
results = BasicData.Table.Count,
rows = rows
};
return Json(json, JsonRequestBehavior.AllowGet);
}

接着定义一个listView，来自上篇

现在我们要定义一个toolbar，在工具栏里面添加了工具按钮、普通文字、分割线、和菜单，还实现了搜索的功能：

[Js]

注意这里，我们通过load store，把keyword关键字传给了c#的action参数：

[Js]

{
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}

最后我们定义一个Panel，把listView和toolbar都添加到Panel上，注意，tbar表示了这个工具栏在上方。

[Js]

var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
items: listView,
tbar: tbar
});

大功告成，我们来看看效果：

我们输入关键字“6”后查看过滤效果：

2.溢出测试

如果工具栏上的item项目过多，而面板的长度不够那会怎么样？我们需要设置 overflowHandler: 'Menu'，代码如下：

[Js]

var bbar = Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
"溢出测试", "溢出测试",
{
xtype: "button",
text: "溢出按钮",
handler: function () {
Ext.Msg.alert("提示", "工具栏按钮被点击");
}
}, { text: "溢出按钮", xtype: "splitbutton"}]
});

预览下效果：

3.在右侧的工具栏

现在我们要实现放置在右侧的工具栏，这次我们直接在面板的代码里面写,代码如下：

[Js]

var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
items: listView,
tbar: tbar,
bbar: bbar,
rbar: [{
iconCls: 'add16',
tooltip: '按钮1'
},
'-',
{
iconCls: 'add16',
tooltip: {
text: '按钮2',
anchor: 'left'
}
}, {
iconCls: 'add16'
}, {
iconCls: 'add16'
},
'-',
{
iconCls: 'add16'
}
]
});

预览下效果：

最后奉上完整的代码：

[Js]

Ext.onReady(function () {
Ext.QuickTips.init();

Ext.define('Datas', {
extend: 'Ext.data.Model',
fields: [
{ name: 'IntData', type: 'int' },
{ name: 'StringData', type: 'string' },
{ name: 'TimeData', type: 'date' }
],
proxy: {
type: 'ajax',
url: 'Toolbar1Json',
reader: {
type: 'json',
root: 'rows'
}
}
});

var store = new Ext.data.Store({
model: 'Datas',
sortInfo: { field: 'IntData', direction: 'DESC' },
autoLoad: true
});
store.load();

var listView = Ext.create('Ext.ListView', {
store: store,
multiSelect: true,
emptyText: '当前没有数据展示',
reserveScrollOffset: true,
columns: [{
header: "IntData",
dataIndex: 'IntData'
}, {
header: "StringData",
dataIndex: 'StringData'
}, {
header: "TimeData",
dataIndex: 'TimeData',
align: 'right',
xtype: 'datecolumn',
format: 'm-d h:i a'
}]
});

var filed1 = new Ext.form.Field();

var tbar = Ext.create("Ext.Toolbar", {
items: ['文字', "-", {
xtype: "splitbutton",
text: "按钮"
}, {
text: "菜单",
menu:
{
items: [
{
text: '选项1'
}, {
text: '选项2'
}, {
text: '选项3',
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
}
}, "->", "关键字：", filed1, {
text: "搜索",
handler: function () {
store.load({ params: { keyword: filed1.getValue()} });
}
}
]
});

var bbar = Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: ["溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试", "溢出测试",
"溢出测试", "溢出测试",
{
xtype: "button",
text: "溢出按钮",
handler: function () {
Ext.Msg.alert("提示", "工具栏按钮被点击");
}
}, { text: "溢出按钮", xtype: "splitbutton"}]
});

var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
items: listView,
tbar: tbar,
bbar: bbar,
rbar: [{
iconCls: 'add16',
tooltip: '按钮1'
},
'-',
{
iconCls: 'add16',
tooltip: {
text: '按钮2',
anchor: 'left'
}
}, {
iconCls: 'add16'
}, {
iconCls: 'add16'
},
'-',
{
iconCls: 'add16'
}
]
});

});

二、Ext.toolbar.Paging

1.基本的分页工具栏控件

Ext.toolbar.Paging就是一个特殊的工具栏，它提供了数据集翻页的功能，下面我们看看store的实现：

[Js]

var store = Ext.create('Ext.data.Store', {
fields: ['IntData', 'StringData', 'TimeData'],
pageSize: 15,
proxy: {
type: 'ajax',
url: 'PagingToolbar1Json',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'results'
}
},
autoLoad: true
});

对应的服务端mvc的代码如下：

[C# Mvc]

public JsonResult PagingToolbar1Json(int start, int limit)
{
var json = new
{
results = BasicData.Table.Count,
rows = BasicData.Table.Skip(start).Take(limit).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
})
};
return Json(json, JsonRequestBehavior.AllowGet);
}

现在我们借用上篇的Ext.view.View控件，把它放置到一个面板中，面板的代码如下：

[Js]

var panel = Ext.create('Ext.Panel', {
renderTo: "div1",
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: 'fit',
title: '分页控件用在View',
items: Ext.create('Ext.view.View', {
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
id: 'view1',
overItemCls: 'hover',
itemSelector: 'tr.data',
emptyText: '没有数据',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
]
}),
bbar: Ext.create('Ext.toolbar.Paging', {
store: store,
displayInfo: true,
items: [
'-', {
text: '第10页',
handler: function () {
store.loadPage(10);
}
}]
})
});

注意上述代码，我们在分页工具栏控件中加入了一个按钮，当单击这个按钮时，数据集自动翻到第十页。

最后我们看看展示效果：

2.扩展后的翻页控件

我们可以通过ux扩展支持定义不同风格的分页控件，这效果就像三国杀扩展包一样，我们可以通过滚轴控件和进度条控件去展示当前处于分页项的哪个位置。我们在分页控件的配置部分添加如下代码:

[Js]

plugins: Ext.create('Ext.ux.SlidingPager', {})

展示效果：

plugins: Ext.create('Ext.ux.ProgressBarPager', {})

展示效果：

完整的代码：

[Js]

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
//Ext.Loader.setPath('Ext.ux.DataView', '/ExtJs/ux/DataView');

Ext.onReady(function () {

var store = Ext.create('Ext.data.Store', {
fields: ['IntData', 'StringData', 'TimeData'],
pageSize: 15,
proxy: {
type: 'ajax',
url: 'PagingToolbar1Json',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'results'
}
},
autoLoad: true
});

var tpl = new Ext.XTemplate(
'<table cellpadding=0 cellspacing=0 border=1 width=450px>',
'<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
'<tr><td style="width:20%"><b>编号</b></td><td style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',
'<tpl for=".">',
'<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
'</tpl>',
'</table>'
);

var panel = Ext.create('Ext.Panel', {
renderTo: "div1",
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: 'fit',
title: '分页控件用在View',
items: Ext.create('Ext.view.View', {
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
id: 'view1',
overItemCls: 'hover',
itemSelector: 'tr.data',
emptyText: '没有数据',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
]
}),
bbar: Ext.create('Ext.toolbar.Paging', {
store: store,
displayInfo: true,
items: [
'-', {
text: '第10页',
handler: function () {
store.loadPage(10);
}
}],
plugins: Ext.create('Ext.ux.SlidingPager', {})
//plugins: Ext.create('Ext.ux.ProgressBarPager', {})
})
});
});

三、Ext.ux.statusbar.StatusBar

这个状态栏控件也是ext的一个扩展支持，不过它就好像军争包一样，这次不是小小改进，而是一个全新的控件。

首先定义一个函数，它在前2秒将状态栏设置为繁忙状态，2秒后恢复：

[Js]

接着我们将要几个按钮到状态栏，第一个设置状态为错误：

[Js]

handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.setStatus({
text: '错误!',
iconCls: 'x-status-error',
clear: true // 自动清除状态
});
}

第二个设置状态为加载中：

[Js]

handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.showBusy();
}

第三个为清除状态：

[Js]

handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.clearStatus();
}

展示效果，分别是加载、错误、和清除状态：

完整的代码：

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');

Ext.onReady(function () {
var loadFn = function (btn, statusBar) {
btn = Ext.getCmp(btn);
statusBar = Ext.getCmp(statusBar);

btn.disable();
statusBar.showBusy();

Ext.defer(function () {
statusBar.clearStatus({ useDefaults: true });
btn.enable();
}, 2000);
};

var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
//layout: 'fit',
title: '演示状态栏',
items: [{ xtype: "button", text: "测试", id:"button1", handler: function (btn, statusBar) {
loadFn("button1", "statusbar1");
}
}],
bbar: Ext.create('Ext.ux.statusbar.StatusBar', {
id: 'statusbar1',
defaultText: '就绪',
text: '没有任务',
iconCls: 'x-status-valid',
items: [
{
xtype: 'button',
text: '设置状态',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.setStatus({
text: '错误!',
iconCls: 'x-status-error',
clear: true // 自动清除状态
});
}
},
{
xtype: 'button',
text: '设置为加载状态',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.showBusy();
}
},
{
xtype: 'button',
text: '清除状态',
handler: function () {
var sb = Ext.getCmp('statusbar1');
sb.clearStatus();
}
}
]
})

});
});

[Js]

本文链接

ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图

2011-12-22T00:21:00Z

《回到系列目录

本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，同时Ext为其提供了基本的排序分页、项选择、事件等支持。

如果不做特殊说明，本系列文章都以mvc的服务端返回json格式的数据作为数据源的方式。

一、Ext.ListView

下面我们看看一个基本的表格数据展示实例：

[html]

<h1>ListView</h1>
<div id="div1" class="content"></div>
<span id="span1"></span>

[Js]

Ext.onReady(function () {
var store = new Ext.data.JsonStore({
fields: [
{ name: 'IntData', type: 'int' },
{ name: 'StringData', type: 'string' },
{ name: 'TimeData', type: 'date' }
],
proxy: {
type: 'ajax',
url: 'ListView1Json',
reader: {
type: 'json',
root: 'rows'
}
},
sortInfo: { field: 'IntData', direction: 'DESC' }
});
store.load();

var listView = Ext.create('Ext.ListView', {
renderTo: "div1",
store: store,
multiSelect: true,
emptyText: '无数据',
reserveScrollOffset: true,
hideHeaders: false, //是否隐藏标题
columns: [{
header: "IntData",
dataIndex: 'IntData'
}, {
header: "StringData",
dataIndex: 'StringData'
}, {
header: "TimeData",
dataIndex: 'TimeData',
align: 'right',
xtype: 'datecolumn',
format: 'm-d h:i a'
}]
});

//当选择行改变时，输出被选行
listView.on('selectionchange', function (view, selectNodes) {
var msg = "";
for (var i = 0; i < selectNodes.length; i++) {
var index = 1 + selectNodes[i].index;
if (msg == "") {
msg = index;
}
else {
msg += "," + index;
}
}
if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
});
});

服务端模拟的数据源，以及通过MVC的jsonresult返回数据的代码：

[C# Mvc]

//控制层
public JsonResult ListView1Json()
{
var json = new
{
rows = BasicData.Table.Take(8).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
})
};
return Json(json, JsonRequestBehavior.AllowGet);
}

//模拟数据
public class BasicData
{
static List<BasicData> table;
static public List<BasicData> Table
{
get
{
if (table == null)
{
table = new List<BasicData>();
for (int i = 0; i < 1000; i++)
{
var obj = new BasicData()
{
IntData = i + 1,
StringData = "测试数据" + (i + 1),
TimeData = DateTime.Today.AddDays(i)
};
table.Add(obj);
}
}
return table;
}
}
public int IntData { get; set; }
public string StringData { get; set; }
public DateTime TimeData { get; set; }
}

来看看效果，数据已经正确加载，当我们选择行时，可以看到提示当前选择了哪些行:

再看看通过火狐调试捕获到的服务端json数据：

二、Ext.view.View

先看看实现代码：

[html]

[Css]

#view1 .data
{
background-color:#fff;
}
#view1 tr.hover {
background-color: #ddd;
}

#view1 .x-item-selected {
background-color:Yellow !important;
}

[Js]

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.DataView', '/ExtJs/ux/DataView');

Ext.onReady(function () {
//创建store
var store = Ext.create('Ext.data.Store', {
fields: ['IntData', 'StringData', 'TimeData'],
proxy: {
type: 'ajax',
url: 'DataView1Json',
reader: {
type: 'json',
root: 'rows'
}
}
});
store.load();

//定义模板
var tpl = new Ext.XTemplate(
'<table cellpadding=0 cellspacing=0 border=1 width=450px>',
'<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
'<tr><td style="width:20%"><b>编号</b></td><td style="width:50%"><b>消息</b></td><td style="width:30%"><b>日期</b></td>',
'<tpl for=".">',
'<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
'</tpl>',
'</table>'
);

//定义Ext.view.View控件
var view = Ext.create('Ext.view.View', {
renderTo: "div1",
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
//height: 310,
trackOver: true,
id: 'view1',
overItemCls: 'hover',
itemSelector: 'tr.data',
emptyText: '没有数据',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
],
listeners: {
selectionchange: function (dataView, selectNodes) {
var msg = "";
for (var i = 0; i < selectNodes.length; i++) {
var index = 1 + selectNodes[i].index;
if (msg == "") {
msg = index;
}
else {
msg += "," + index;
}
}
if (msg == "") Ext.get("span1").update('当前没有选择任何数据。');
else Ext.get("span1").update('当前选择了第' + msg + '行数据。');
}
}
});

});

[C# Mvc]

public JsonResult DataView1Json()
{
var json = new
{
rows = BasicData.Table.Take(8).Select(x => new
{
IntData = x.IntData,
StringData = x.StringData,
TimeData = x.TimeData.ToShortDateString()
})
};
return Json(json,JsonRequestBehavior.AllowGet);
}

1.要注意的地方：

对于数据item项，我们在其html 设置 class="data",那么我们在配置项中设置：itemSelector: 'tr.data'表明了这个CSS选择器选中的元素是一个item数据项。

当item被选择时，我们需要定义一个.x-item-selected 的样式，这样才可以在展示界面表现出item项被选中时的样式。

下面我们看看效果：

2.对Ext.view.View的扩展

注意到配置项的如下代码：

[Js]

plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
],

这里分别引入了两个扩展支持，前者描述了数据项可以通过拖动鼠标选择多个item项，查看效果：

第二个扩展支持了对item数据项记录集的单元格数据的编辑功能，这里表明了dataIndex为'IntData'的单元格可以被编辑。注意：在模板对应的位置要引入 class="x-editable"的样式来支持。下面看看效果：

本文链接

ExtJs4 笔记（10） Ext.tab.Panel 选项卡

2011-12-21T00:22:00Z

《回到系列目录

本篇讲解选项卡控件。

一、基本选项卡

首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：

[html]

<h1>基本选项卡</h1>
<div class="content" style="height: 150px">
<div id="tabPanel">
<div style="display: none">
<div id="oneTab">
<p>这个tab所展示的内容是读取至其他HTML标签</p>
</div>
</div>
</div>
</div>

[Js]

//1.基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
renderTo: "tabPanel",
activeTab: 1, //指定默认的活动tab
width: 600,
height: 120,
plain: true, //True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll: true, //选项卡过多时，允许滚动
defaults: { autoScroll: true },
items: [{
id: "tab1",
title: '普通Tab',
html: "这只是一个非常普通的Tab。",
items:[{xtype:'button',text:'按钮'}],
closable: true //这个tab可以被关闭
}, {
id: "tab2",
title: '内容来至div',
contentEl: 'oneTab' //指定了当前tab正文部分从哪个html元素读取
}, {
id: "tab3",
title: 'Ajax Tab',
autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
}, {
id: "tab4",
title: '事件Tab',
listeners: { activate: handleActivate },
html: "带事件的Tab。"
}, {
id: "tab5",
title: '不可用Tab',
disabled: true,
html: "不可用的Tab，你是看不到我的。"
}]
});
//单击tab4后触发的事件
function handleActivate(tab) {
alert(tab.title + ': activated事件触发。');
}

我们查看一下生成的选项卡效果：

二、操作选项卡

选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：

[html]

<h1>操作选项卡</h1>
<div class="content" id="content2"></div>

[Js]

效果：

三、选项卡按钮在下方

默认的选项卡按钮在上方，我们可以随意定义选项卡按钮的位置，下面代码演示了具体的用法：

[html]

<h1>选项卡按钮在下方</h1>
<div class="content" id="content3"></div>

[Js]

//选项卡按钮在下方
var tabs3 = Ext.createWidget('tabpanel', {
renderTo: "content3",
activeTab: 0,
width: 600,
height: 150,
tabPosition: 'bottom' //指定了选项卡的位置，left,right
});
for (var i = 0; i < 3; i++)
tabs3.add({
title: 'Tab ' + i,
id: "Tabs3_" + i,
html: '选项卡文本部分 ' + (index) + '<br/><br/>',
closable: true
});

效果：

四、可拖动的选项卡

通过官方扩展包我们可以增强选项卡控件的易用性，比如现在我们可以实现一个可以拖动选项卡按钮的功能：

[html]

<h1>可拖动的选项卡</h1>
<div class="content" id="content4"></div>

[Js]

//首先要动态加载ux扩展的js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.tab.Panel',
'Ext.ux.TabScrollerMenu',
'Ext.ux.TabReorderer',
'Ext.ux.TabCloseMenu',
'Ext.ux.GroupTabPanel'
]);

//以下是功能代码

//可拖动的选项卡
var tabs4 = Ext.createWidget('tabpanel', {
renderTo: "content4",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabReorderer'),
items: [{
xtype: 'panel',
title: 'tab不可拖',
html: "这个选项卡不可被拖动",
reorderable: false,
closable: true
}]
});
for (var i = 0; i < 3; i++)
tabs4.add({
title: 'Tab ' + i,
id: "Tabs4_" + i,
html: '选项卡文本部分 ' + (index) + '<br/><br/>'
});

效果如下，可见一个tab已经被移动：

五、过多选项卡的菜单式展示

如果面板上的选项卡打开的过多而显示不下，那么需要对溢出的选项卡用菜单的方式展示出来，实现方式如下，注意要引入扩展的css样式：

[html]

<h1>过多选项卡的菜单式展示</h1>
<div class="content" id="content5"></div>

[Js]

//选项卡过多溢出时菜单显示
var tabs5 = Ext.createWidget('tabpanel', {
renderTo: "content5",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabScrollerMenu', {
maxText: 15,
pageSize: 5
}),
items: [{
title: 'tab0',
html: '第一个tab'
}]
});
Ext.defer(function () {
var myTabs = [];
for (var i = 0; i < 15; i++) {
myTabs.push({
title: 'Tab ' + i,
id: "Tabs5_" + i,
html: '选项卡文本部分 ' + (index) + '<br/><br/>'
});
}
tabs5.add(myTabs);
}, 1000);

效果：

六、选项卡的右键菜单

一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡，在ext中也可以做到，实现方法如下：

[html]

<h1>选项卡的右键菜单</h1>
<div class="content" id="content6"></div>

[Js]

//选项卡的右键菜单
var currentItem;
var tabs6 = Ext.createWidget('tabpanel', {
renderTo: "content6",
activeTab: 0,
width: 600,
height: 150,
plugins: Ext.create('Ext.ux.TabCloseMenu', {
closeTabText: '关闭当前',
closeOthersTabsText: '关闭其他',
closeAllTabsText: '关闭所有',
extraItemsTail: [
'-',
{
text: '可关闭',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
var menuitem = menu.child('*[text="可关闭"]');
currentItem = item;
menuitem.setChecked(item.closable);
}
}
}),
items: [{
title: 'tab1',
html: '第一个tab'
}, {
title: 'tab2',
closable: true,
html: '第二个tab'
}, {
title: 'tab3',
closable: true,
html: '第三个tab'
}]
});

效果：

七、分组式选项卡

我们还可以对选项卡进行分组，具体实现如下：

[html]

<h1>分组式选项卡</h1>
<div class="content" id="content7"></div>

[Js]

//分组式选项卡
var tabs7 = Ext.create('Ext.ux.GroupTabPanel', {
activeGroup: 0, //设置当前活动的分组
items: [{
expanded: false,
mainItem: 1, //设置主要的item，这个tab会在最上面，以文件夹方式展示出来。
items: [{
title: '项目1',
html: "<b>第一组第一项正文。</b>"
}, {
title: '项目2',
border: false,
html: "<b>第一组第二项正文。</b>"
}, {
title: '项目3',
border: false,
html: "<b>第一组第三项正文。</b>"
}]
}, {
expanded: true,
items: [{
title: '项目1',
html: "<b>第二组第一项正文。</b>"
}, {
title: '项目2',
html: "<b>第二组第二项正文。</b>"
}]
}]
});
Ext.create('Ext.Panel', {
renderTo: "content7",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '分组tab演示',
items: tabs7
});

效果：

本文链接

ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

2011-12-20T00:25:00Z

《回到系列目录

本篇讲解三个容器类控件。

一、面板控件 Ext.Panel

一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项：

1.title:设置面板标题文本。

2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。

3.html，items:前者用来设置正文部分的html，后者设置正文部分的ext控件。

4.buttons:设置按钮区的按钮。

下面看看面板生成代码：

[html]

<h1>Panel</h1>
<div id="div1" class="content">
</div>

[Js]

Ext.onReady(function () {
var p = Ext.create('Ext.Panel', {
title: '面板标题',
collapsible: true,
renderTo: 'div1',
width: 400,
height: 300,
autoScroll: false,
bodyBorder: true,
buttonAlign: 'right',
buttons: [{
text: "按钮1",
handler: function () {
Ext.Msg.alert("提示", "第一个事件");
},
id: "bt1"
}, {
text: "按钮2",
id: "bt2"
}
],
floating: true,
footerCfg: { tag: 'span', id: 'span1', html: '面板底部' },
items: [{
xtype: "button",
text: "按钮"
}],
tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["工具栏"] }),
html: "<b>正文</b>"
});

p.setPosition(40, 50);

});

效果如下：

二、窗口控件 Ext.window.Window

窗口控件与面板控件基本类似，只不过他看起来像一个窗口，具备最大化，最小化，打开关闭、拖动等窗口操作，下面看看窗口生成代码：

下面看看面板生成代码：

[html]

[Js]

Ext.onReady(function () {
var window1 = Ext.create('Ext.window.Window', {
applyTo: 'win1',
layout: 'table', //内部元素布局方式{absolute accordion anchor border card column fit form table}
width: 500,
height: 200,
closeAction: 'hide', //窗口关闭的方式：hide/close
plain: true,
title: "窗口标题",
maximizable: true, //是否可以最大化
minimizable: true, //是否可以最小化
closable: false, //是否可以关闭
modal: true, //是否为模态窗口
resizable: false, //是否可以改变窗口大小
items: [{
text: '按钮',
xtype: "button"
}, {
width: 214,
minValue: 0,
maxValue: 100,
value: 50,
xtype: "slider"
}, {
xtype: "button",
text: '一个菜单',
width: "60px",
height: "15px",
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function (cp, color) {
Ext.Msg.alert('颜色选择', '你选择了' + color + '。');
}
}
}), '-',
{ text: '菜单项1' }, { text: '菜单项2' }, { text: '菜单项3' }
]
}
}],

buttons: [{
text: '确定',
disabled: true
}, {
text: '取消',
handler: function () {
window1.hide();
}
}]
});
Ext.fly("button1").on("click", function () {
window1.show(Ext.get("button1"));
});
});

效果如下：

三、布局控件 Ext.container.Viewport

布局控件一般用于整个页面的排版布局，它按四个方向分为四块区域，和中间正文部分，四个区域都可以自动隐藏，其实这个控件的核心功能就是用到了“border”方式的布局，下面看看生成代码：

[Js]

Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1>这里放置logo</h1>',
xtype: "panel",
title: "标题",
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: '左侧导航',
xtype: 'panel',
width: 200,
autoScroll: true
}, {
region: 'center',
xtype: 'tabpanel',
activeItem: 0,
items: {
title: '首页',
html: '这里是首页正文内容'
}
}, {
region: 'south',
title: '底部',
collapsible: true, //允许折叠
html: '这里放置版权信息',
split: true,
height: 100,
minHeight: 100
}]
});

});

效果如下：

本文链接

ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

2011-12-19T00:25:00Z

《回到系列目录

本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。

一、滚轴控件 Ext.slider

1.滚轴控件的定义

下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：

[html]

<h1>滚轴控件</h1>
<div class="content">
<h2>横向，初始值50</h2>
<div id="slider1"></div>

<h2>纵向，带提示</h2>
<div id="slider2"></div>

<h2>多值，自定义提示</h2>
<div id="slider3"></div>
</div>

[Js]

//横向，初始值50
var slider1 = Ext.create('Ext.slider.Single', {
renderTo: 'slider1',
width: 214,
minValue: 0,
maxValue: 100,
value: 50
});

//纵向，带提示
new Ext.create('Ext.slider.Single', {
renderTo: 'slider2',
height: 150,
minValue: 0,
maxValue: 20,
vertical: true,
plugins: new Ext.slider.Tip()
});

//多值，自定义提示
var slider3 = Ext.create('Ext.slider.Multi', {
renderTo: 'slider3',
width: 214,
minValue: 0,
maxValue: 20,
values: [5, 12],
plugins: new Ext.slider.Tip({
getText: function (thumb) {
return Ext.String.format('当前：<b>{0}/20</b>', thumb.value);
}
})
});

2.获取、设置滚轴控件的值

[html]

<h1>操作滚轴控件</h1>
<div class="content">
<button id="button1">设置滚轴1的值为10</button>
<button id="button2">获取滚轴1的值</button>
<button id="button3">设置滚轴3的值为10,15</button>
<button id="button4">获取滚轴3的值集合</button>
</div>

[Js]

//设置滚轴1的值为10
Ext.fly("button1").on('click', function () {
slider1.setValue(10);
});

//获取滚轴1的值
Ext.fly("button2").on('click', function () {
Ext.MessageBox.alert("获取值", "滚轴1的值：" + slider1.getValue());
});

//设置滚轴3的值为10,15
Ext.fly("button3").on('click', function () {
slider3.setValue(0, 10);
slider3.setValue(1, 15);
});

//获取滚轴3的值集合
Ext.fly("button4").on('click', function () {
Ext.MessageBox.alert("获取值", "滚轴3的值集合：" + slider3.getValues());
});

3.效果展示

二、进度条控件 Ext.ProgressBar

1.加载进度条

[html]

[Js]

//加载进度条
var progressBar1 = Ext.create("Ext.ProgressBar", {
id: "progressBar1",
text: '准备中...',
renderTo: 'p1'
});
Ext.fly("button1").on('click', function () {
//模拟加载环境
var f = function (v) {
return function () {
var i = v / 12;
progressBar1.updateProgress(i, '进度：' + v + '/12');
if (v == 12) {
Ext.Msg.alert("提示", "加载完毕！");
progressBar1.reset(); //复位进度条
progressBar1.updateText("完成。");
}
};
};
for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 200);
}
});

2.等候进度条

[html]

[Js]

//等候进度条
var pbar2 = Ext.create("Ext.ProgressBar", {
id: "progressBar2",
renderTo: 'p2',
width: '150px'
});
pbar2.on('update', function (val) {
//每次更新可以执行的动作
Ext.fly('p2text').dom.innerHTML += '>';
});
Ext.fly("button2").on('click', function () {
Ext.fly('p2text').update('正在启动windows2000：');
pbar2.wait({
interval: 200, //每次更新的间隔周期
duration: 5000, //进度条运作时间的长度，单位是毫秒
increment: 5, //进度条每次更新的幅度大小,表示走完一轮要几次（默认为10）。
fn: function () { //当进度条完成自动更新后执行的回调函数。该函数没有参数。
Ext.fly('p2text').update('完成。');
}
});
});

3.等候进度条，等待第三方事件

[html]

[Js]

//等候进度条，当第三方事件结束时，停止。
var pbar3 = Ext.create("Ext.ProgressBar", {
renderTo: 'p3',
width: '250px'
});

Ext.fly("button3").on('click', function () {
pbar3.wait({
interval: 100,
increment: 5
});
Ext.fly('p3text').update('第三方事件正在执行，请稍候....');

setTimeout(function () {
pbar3.reset();
Ext.fly('p3text').update('执行完毕.');
}, 5000);
});

4.效果展示

三、编辑控件 Ext.Editor

编辑控件可以作用在一般html元素或者其他ext基本控件上，从而然这些基本元素和控件具备了编辑某些值的能力。

1.用文本框编辑普通文本

下面通过一个编辑控件作用在span标签上，双击该标签即可编辑该标签的文本类容。

[html]

<h1>用文本框编辑普通文本</h1>
<div class="content">
<span id="span1">请双击我修改文字</span>
</div>

[Js]

//用文本框编辑普通文本
var editor1 = new Ext.Editor({
shadow: false,
completeOnEnter: true, //按回车时自动完成
cancelOnEsc: true, //按ESC自动退出编辑
updateEl: true, //有变化时更新
ignoreNoChange: true, //不理会没有变化的情况
listeners: {
complete: function (editor, value, oldValue) {
Ext.Msg.alert('文本被改变', "从“" + oldValue + "” 变为“" + value + "”");
}
},
field: {
allowBlank: false,
xtype: 'textfield',
width: 150,
selectOnFocus: true
}
});

Ext.get("span1").on('dblclick', function (event, span1_dom) {
editor1.startEdit(span1_dom);
});

效果如下：

处于编辑状态时：

2.用下拉列表编辑

这个例子要修改Ext.Panel控件的标题。

[html]

<h1>用下拉列表编辑</h1>
<div class="content" id="div2">

</div>

[Js]

//用下拉列表编辑
var editor2 = new Ext.Editor({
shadow: false,
completeOnEnter: true,
cancelOnEsc: true,
updateEl: true,
ignoreNoChange: true,
listeners: {
complete: function (editor, value, oldValue) {
Ext.Msg.alert('文本被改变', "从“" + oldValue + "” 变为“" + value + "”");
}
},
field: {
width: 110,
id: "combo1",
//renderTo: 'div2',
triggerAction: 'all',
xtype: 'combo',
editable: false,
forceSelection: true,
store: ['下拉项1', '下拉项2', '下拉项3']
}
});

var panel = new Ext.Panel({
renderTo: "div2",
width: 200,
height: 50,
collapsible: true,
layout: 'fit',
title: '请双击标题',
listeners: {
afterrender: function (panel) {
panel.header.titleCmp.textEl.on('dblclick', function (event, label1_dom) {
editor2.startEdit(label1_dom);
});
}
}
});

效果如下：

处于编辑状态时：

本文链接

ExtJs4 笔记（7） Ext.tip.ToolTip 提示

2011-12-16T00:16:00Z

《回到系列目录

本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。

一、基本提示 Ext.tip.ToolTip

1.最简单的提示

下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：

[html]

接着在js中添加如下代码：

[Js]

Ext.create('Ext.tip.ToolTip', {
target: 'tip1',
html: '最简单的提示'
});

OK,第一个提示已经添加成功，我们来预览一下效果：

2.可关闭的提示

[html]

<div id="tip2" class="TipDiv">不自动隐藏</div>

[Js]

Ext.create('Ext.tip.ToolTip', {
target: 'tip2',
html: '请点击关闭按钮',
title: '标题',
autoHide: false,
closable: true,
draggable: true //可以允许被拖动
});

效果如下，鼠标移移出后提示不消失，单击叉即可关闭：

3.Ajax提示，提示的内容来自服务端

[html]

<div id="tip3" class="TipDiv"> Ajax提示</div>

[Js]

Ext.create('Ext.tip.ToolTip', {
target: 'tip3',
width: 200,
autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} },
dismissDelay: 15000 //15秒后自动隐藏
});

在服务端通过MVC控制层action来返回提示内容，代码如下：

[c#]

public ContentResult AjaxTipData(string data)
{
return Content("<font color='red'>这是Ajax提示信息：</font><br>客户端参数：" + data);
}

效果：

4.提示跟随鼠标移动

[html]

[Js]

Ext.create('Ext.tip.ToolTip', {
target: 'tip4',
html: '跟随鼠标的提示',
trackMouse: true // 跟随鼠标移动
});

效果：

5.带箭头的提示

[html]

<div id="tip6" class="TipDiv">指定提示方向</div>

[Js]

Ext.create('Ext.tip.ToolTip', {
target: 'tip6',
anchor: 'buttom', //指定箭头的指向 top,left,right
width: 120,
anchorOffset: 50, //指定箭头的位置
html: '带箭头的提示，并指定方向'
});

效果：

5.图文并茂的提示内容

在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：

[html]

<div id="tip7" class="TipDiv"> 高级自定义</div>
<div style="display:none;">
<div id="tipContent">
<ul>
<li>提示项1</li>
<li>提示项2</li>
<li>提示项3</li>
<li>提示项4</li>
</ul>
<img src="http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" />
</div>
</div>

[Js]

Ext.create('Ext.tip.ToolTip', {
title: '<a href="#">链接式标题</a>',
id: 'toolTip7',
target: 'tip7',
anchor: 'left',
html: null,
width: 415,
autoHide: false,
closable: true,
contentEl: 'tipContent', //用id为tipContent的html标签内容作为提示信息
listeners: {
'render': function () {
this.header.on('click', function (e) {
e.stopEvent();
Ext.Msg.alert('提示', '标题被点击.');
Ext.getCmp('toolTip7').hide();
}, this, { delegate: 'a' });
}
}
});

效果：

二、快速提示 Ext.tip.QuickTip

快速提示通过在html上添加特定的属性就可以体现出来，比较方便，只需要在代码里面通过如下方式初始化：

[Js]

Ext.QuickTips.init();

下面看看使用方式：

[html]

data-qtip:设置提示正文内容。
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点，对应到原件的哪个基准点。例如：tl-br表示用提示的左上角，对应到原件的右下角。

效果展示：

三、在extjs控件上使用提示

1.按钮上的快速提示

首先也要运行如下代码：

[Js]

Ext.QuickTips.init();

这样按钮配置项就可以使用“tooltip”了：

[Js]

Ext.create("Ext.Button", {
renderTo: Ext.get("tipdiv"),
text: "按钮上的快速提示",
tooltip: "提示信息"
});

效果展示：

2.按钮上的自定义提示

[Js]

//按钮上的自定义提示
Ext.create("Ext.Button", {
renderTo: Ext.get("tipdiv"),
text: "按钮上的自定义提示",
id: "bt1"
});
Ext.create('Ext.tip.ToolTip', {
target: 'bt1',
anchor: 'buttom',
width: 120,
anchorOffset: 50,
html: '按钮上的自定义提示信息'
});

效果展示：

本文链接

ExtJs4 笔记（6） Ext.MessageBox 消息对话框

2011-12-14T00:10:00Z

《回到系列目录

本篇演示消息对话框的用法，ExtJs封装了可能用到的各类消息框，并支持自定义的配置。

如下是用到的html：

[html]

<h1>各种消息框</h1>
<div id="div1" class="content">
<button id="bt1" type="button" >Confirm</button>
<button id="bt2" type="button" >Prompt</button>
<button id="bt3" type="button" >DIY窗口</button>
<button id="bt4" type="button" >进度条</button>
<button id="bt5" type="button" >进度条2</button>
<button id="bt6" type="button" >wait</button>
</div>

一、警告对话框和确认对话框

展示一个带“是”，“否”按钮的确认对话框。当单击按钮时，执行回调函数，获取按钮类型，并弹出一个警告对话框。

[Js]

Ext.get("bt1").on("click", function () {
Ext.MessageBox.confirm("标题", "详细信息内容", function (btn) {
Ext.Msg.alert("提示", "你点击了" + btn + "按钮");
});
});

效果展示：

二、输入对话框

展示一个带文本框的对话框，可以供用户录入。单击按钮后可以获取文本框的内容。

[Js]

Ext.get("bt2").on("click", function () {
Ext.MessageBox.prompt(
"标题",
"详细信息内容",
function (btn, text) {
Ext.Msg.alert("提示", "你点击了" + btn + "按钮,获取的文本：" + text);
},
this,
true, //表示文本框为多行文本框
"初始文本");
});

效果展示：

三、自定义DIY对话框

展示一个自定义的对话框，可以定义图标样式，按钮组的类型，是否带文本框，是否带进度条等信息。

[Js]

Ext.get("bt3").on("click", function () {
Ext.MessageBox.show({
title: "标题",
msg: "详细信息内容",
buttons: Ext.MessageBox.YESNOCANCEL, //对话框的按钮组合
multiline: false, //有文本框时，是否为多行文本框
closable: false, //是否可关闭
prompt: true,
icon: Ext.MessageBox.WARNING,
iconCls: "add16",
width: 400,
proxyDrag: true,
value: "初始文本",
progress: true,
progressText: "加载中..",
animateTarget: "bt3"
});
});

效果展示：

四、加载进度条对话框

展示一个带加载进度条的对话框，提示当前执行任务的进度信息。

[Js]

Ext.get('bt4').on('click', function () {
Ext.MessageBox.show({
title: '加载窗口',
msg: '详细信息内容',
progressText: '加载中...',
width: 300,
progress: true,
closable: false,
animateTarget: 'bt4'
});

//模拟加载环境
var f = function (v) {
return function () {
if (v == 12) {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "加载完毕！");
} else {
var i = v / 11;
Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 完成');
}
};
};
for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 200);
}
});

效果展示：

五、等待进度条对话框

展示等待进度条的对话框，提示用户当前正在等待某一任务执行。

[Js]

Ext.get('bt5').on('click', function () {
Ext.MessageBox.show({
msg: '正在保存数据..',
progressText: '保存中...',
width: 300,
wait: true,
waitConfig: { interval: 200 },
icon: 'download',
animateTarget: 'bt5'
});
setTimeout(function () {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "保存完毕！");
}, 3000);
});

效果展示：

六、基本的等待对话框

这里演示基本的等待对话框的实现方式。

[Js]

Ext.get('bt6').on('click', function () {
Ext.MessageBox.wait("详细信息内容", "标题", {
interval: 100 //进度条加载速度
});
setTimeout(function () {
Ext.MessageBox.hide();
Ext.Msg.alert("提示", "完毕！");
}, 35000);
});

效果展示：

本文链接

ExtJs4 笔记（5） Ext.Button 按钮

2011-12-13T00:07:00Z

《回到系列目录

从本篇开始讲基础控件，ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮，下拉选项式按钮和按钮组合等。我们先看看效果图:

预览

如下是用到的html：

[html]

<h1>
三种方式实现事件：
</h1>
<div id="div1" class="content">
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
</div>
<h1>
带图标菜单：
</h1>
<div id="div2" class="content">
</div>
<h1>
带分割线的按钮</h1>
<div id="div3" class="content">
</div>
<h1>
菜单式按钮</h1>
<div id="div4" class="content">
</div>
<h1>
按钮组合</h1>
<div id="div5" class="content">
</div>

一、基本按钮，三种方式实现按钮事件

这里介绍了最基本的按钮生成代码，第一个按钮具备弹起和按下两种状态，三个按钮分别别设置成三种大小。每个按钮的单击事件都是通过一种新的实现方式。下面看看Js代码：

[Js]

Ext.create("Ext.Button", {
renderTo: Ext.get("li1"),
text: "事件实现1",
allowDepress: true, //是否允许按钮被按下的状态
enableToggle: true, //是否允许按钮在弹起和按下两种状态中切换
handler: function () {
Ext.Msg.alert("提示", "第一个事件");
},
id: "bt1"
});

Ext.create("Ext.Button", {
renderTo: Ext.get("li2"),
text: "事件实现2",
listeners: { "click": function () {
Ext.Msg.alert("提示", "第二个事件");
}
},
id: "bt2",
scale: 'medium'
});

var bt3 = Ext.create("Ext.Button", {
renderTo: Ext.get("li3").dom,
text: "事件实现3",
id: "bt3",
scale: 'large'
});
bt3.on("click", function () {
Ext.Msg.alert("提示", "第三个事件");
});

二、带图标菜单

按钮可以带图标和菜单，我们可以在配置项里面配置：

[Js]

Ext.create("Ext.Button", {
renderTo: Ext.get("div2"),
id: "bt4",
text: "带菜单带图标",
iconCls: "add16",
menu:
{
items: [
{
text: '选项1'
}, {
text: '选项2'
}, {
text: '选项3',
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
}
}).showMenu();

Ext.create("Ext.Button", {
renderTo: Ext.get("div2"),
id: "bt5",
text: "上图标下菜单",
iconCls: "add16",
iconAlign: 'top',
menu:
{
items: [
{
text: '选项1'
}, {
text: '选项2'
}, {
text: '选项3',
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
},
arrowAlign: 'bottom'

});

三、带分割线的按钮

注意的地方：分割线的按钮来自于类Ext.SplitButton

[Js]

Ext.create("Ext.button.Split", {
renderTo: Ext.get("div3"),
text: "右图标下菜单",
iconCls: "add16",
iconAlign: 'right',
menu:
{
items: [
{
text: '选项1'
}, {
text: '选项2'
}, {
text: '选项3',
handler: function () {
Ext.Msg.alert("提示", "来自菜单的消息");
}
}
]
},
arrowAlign: 'bottom'

});

四、菜单式按钮

按钮式菜单Ext.CycleButton与下拉不同的是，它具备选中状态，当选中下拉项时，选中文本会相应变化。

[Js]

Ext.create('Ext.button.Cycle', {
renderTo: Ext.get("div4"),
showText: true,
prependText: '请选择：',
menu:
{
items: [{
text: '选项1',
checked: true
}, {
text: '选项2'
}, {
text: '选项3'
}]
},
changeHandler: function (btn, item) {
Ext.Msg.alert('修改选择', item.text);
}
});

四、按钮组合

定义了一组按钮，并可以控制按钮排版。

[Js]

Ext.create("Ext.ButtonGroup",{
renderTo: Ext.get("div5"),
title: "按钮组合",
columns: 3,
//defaultType:'splitbutton',
items: [{
text: '按钮1',
iconCls: 'add16',
scale: 'large',
rowspan: 2
}, {
text: '按钮2', iconCls: 'add16', rowspan: 2, scale: 'large'
}, {
text: '按钮3', iconCls: 'add16'
}, {
xtype: 'splitbutton', text: '分割线按钮', iconCls: 'add16', menu: [{ text: '菜单1'}]
}]
});

本文链接