Extjs4中的常用组件：Grid、Tree和Form
extend: 'Ext.data.Model',
fields: [
{name: 'book'},
{name: 'topic', type: 'string'},
{name: 'version', type: 'string'},
{name: 'released', type: 'boolean'},
{name: 'releasedDate', type: 'date'},
{name: 'value', type: 'number'}
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Book',
data: [
['Ext JS 4: First Look','Ext JS','4',false,null,0],
['Learning Ext JS 3.2','Ext JS','3.2',tr ue,'2010/10/01',40.49],
['Ext JS 3.0 Cookbook','Ext JS','3',true,'2009/10/01',44.99],
['Learning Ext JS','Ext JS','2.x',true,'2008/11/01',35.99],
]
store: store,
width: 550,
title: 'Ext JS Books',
renderTo: 'grid-example',
selModel: Ext.create('Ext.selection.CheckboxModel'), //1
columns: [
Ext.create('Ext.grid.RowNumberer'), //2
{
text: 'Book',//3
flex: 1,
dataIndex: 'book'
},{
text: 'Category', //4
xtype:'templatecolumn',
width: 100,
tpl: '{topic} {version}'
},{
text: 'Already Released?', //5
xtype: 'booleancolumn',
width: 100,
dataIndex: 'released',
trueText: 'Yes',
falseText: 'No'
},{
text: 'Released Date', //6
xtype:'datecolumn',
width: 100,
dataIndex: 'releasedDate',
format:'m-Y'
},{
text: 'Price', //7
xtype:'numbercolumn',
width: 80,
dataIndex: 'value',
renderer: Ext.util.Format.usMoney
},{
xtype:'actioncolumn', //8
width:50,
items: [{
icon: 'images/edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Edit',rec.get('book'));
}
},{
icon: 'images/delete.gif',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Delete',rec.get('book'));
}
}]
}]
.png)
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: ['name', 'topic']
});
var Books = Ext.create('Ext.data.Store', {
model: 'Book',
groupField: 'topic',
data: [{
name: 'Learning Ext JS',
topic: 'Ext JS'
},{
name: 'Learning Ext JS 3.2',
topic: 'Ext JS'
},{
name: 'Ext JS 3.0 Cookbook',
topic: 'Ext JS'
},{
topic: 'PHP'
},{
name: 'NetBeans IDE 7 Cookbook',
topic: 'Java'
},{
name: 'iReport 3.7',
topic: 'Java'
},{
name: 'Python Multimedia',
topic: 'Python'
},{
name: 'NHibernate 3.0 Cookbook',
topic: '.NET'
},{
name: 'ASP.NET MVC 2 Cookbook',
topic: '.NET'
}]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Books,
width: 350,
height: 400,
title: 'Books',
features: [Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'topic: {name} ({rows.length} Book{[values.rows.length > 1 ? "s" : ""]})'
})],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Topic',
flex: 1,
dataIndex: 'topic'
}]
.png)
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Books,
width: 350,
height: 300,
title: 'Books',
features: [{
ftype: 'summary'
}],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('{0} book{1}',
value, value !== 1 ? 's' : '');
}
},{
text: 'Topic',
flex: 1,
dataIndex: 'topic'
}]
});
.png)
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Books,
width: 350,
height: 400,
title: 'Books',
features: [{
groupHeaderTpl: 'Topic: {name}',
ftype: 'groupingsummary'
}],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('{0} book{1}',
value, value !== 1 ? 's' : '');
}
},{
text: 'Topic',
flex: 1,
dataIndex: 'topic'
}]
.png)
renderTo: Ext.getBody(),
frame: true,
store: Books,
width: 350,
height: 300,
title: 'Books',
features: [{
ftype: 'rowbody',
getAdditionalData: function(data, idx, record, orig) {
return {
rowBody: Ext.String.format(
'<div>->topic:<span> {0}</span></div>',
data.topic)
};
}
}],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}]
.png)
extend: 'Ext.data.Model',
fields: ['name', 'email','phone']
});
var Contacts = Ext.create('Ext.data.Store', {
model: 'Contact',
data: [
{name: 'Loiane', email: 'me@loiane.com', phone: '1234-5678'},
{name: 'Peter', email: 'peter@email.com', phone: '2222-2222'},
{name: 'Ane', email: 'ane@email.com', phone: '3333-3333'},
{name: 'Harry', email: 'harry@email.com', phone: '4444-4444'},
{name: 'Camile', email: 'camile@email.com', phone: '5555-5555'}
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Contacts,
width: 350,
title: 'Contacts',
selType: 'cellmodel',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
text: 'Email',
flex: 1,
dataIndex: 'email',
editor: {
xtype:'textfield',
allowBlank:false
}
},{
text: 'Phone',
flex: 1,
dataIndex: 'phone',
editor: {
xtype:'textfield',
allowBlank:false
}
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
.png)
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Contacts,
width: 350,
title: 'Contacts',
selType: 'rowmodel',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Email',
flex: 1,
dataIndex: 'email',
editor: {
xtype:'textfield',
allowBlank:false
}
},{
text: 'Phone',
flex: 1,
dataIndex: 'phone',
editor: {
xtype:'textfield',
allowBlank:false
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
]
.png)
var Contacts = Ext.create('Ext.data.Store', {
model: 'Contact',
proxy: {
type: 'ajax',
api: {
read : 'contact/view.php',
update: 'contact/update.php',
destroy: 'contact/delete.php'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
}
}
var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
var grid = Ext.create('Ext.grid.Panel', {
//other config options
plugins: rowEditor,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
handler : function() {
rowEditor.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Contact',
email: 'newcontact@email.com',
phone: '1111-1111'
}, 'Contact');
Contacts.insert(0, r);
rowEditor.startEdit(0, 0);
}
text: 'Delete',
handler: function() {
var sm = grid.getSelectionModel();
rowEditor.cancelEdit();
Contacts.remove(sm.getSelection());
if (Contacts.getCount() > 0) {
sm.select(0);
}
}
}]
}]
new Ext.tree.TreePanel({
renderTo: 'tree-example',
title: 'Simple Tree',
width: 200,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [
{ text: "Menu Option 1", leaf: true },
{ text: "Menu Option 2", expanded: true,
children: [
{ text: "Sub Menu Option 2.1", leaf: true },
{ text: "Sub Menu Option 2.2", leaf: true}
] },
{ text: "Menu Option 3", leaf: true }
]
})
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Menu Option 1", leaf: true },
{ text: "Menu Option 2", expanded: true,
children: [
{ text: "Sub Menu Option 2.1", leaf: true },
{ text: "Sub Menu Option 2.2", leaf: true}
] },
]
}
}),
rootVisible: false,
renderTo: 'tree-example'
.png)
Ext.create('Ext.tree.Panel', {
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
},
//other properties
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
api: {
read : '../data/drag-drop.json',
create : 'create.php'
}
},
writer: {
type: 'json',
writeAllFields: true,
encode: false
},
autoSync:true
Ext.create('Ext.data.TreeStore', {
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
[{
"text": "Cartesian",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Bar",
"leaf": true,
"checked": true
},{
"text": "Column",
"leaf": true,
"checked": true
},{
"text": "Line",
"leaf": true,
"checked": false
}]
},{
"text": "Gauge",
"leaf": true,
"checked": false
},{
"text": "Pie",
"checked": true
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/check-nodes.json'
},
sorters: [{
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Charts I have studied',
renderTo: 'tree-example',
width: 200,
height: 250
.png)
Ext.define('Book', {
fields: [
{name: 'book', type: 'string'},
{name: 'pages', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Book',
proxy: {
type: 'ajax',
url: 'data/treegrid.json'
},
folderSort: true
Ext.create('Ext.tree.Panel', {
title: 'Books',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
columns: [{
xtype: 'treecolumn',
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
.png)
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
renderTo: 'form-example',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'hiddenfield', //1
name: 'hiddenfield1',
value: 'Hidden field value'
},{
xtype: 'displayfield', //2
name: 'displayfield1',
fieldLabel: 'Display field',
value: 'Display field <span style="color:red;">value</span>'
},{
xtype: 'textfield', //3
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
},{
xtype: 'textfield', //4
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
},{
xtype: 'textareafield', //5
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
},{
name: 'file1',
fieldLabel: 'File upload'
},{
xtype: 'timefield', //7
name: 'time1',
fieldLabel: 'Time Field',
minValue: '8:00 AM',
maxValue: '5:00 PM',
increment: 30
},{
xtype: 'datefield', //8
name: 'date1',
fieldLabel: 'Date Field',
value: new Date()
},{
xtype: 'combobox', //9
fieldLabel: 'Combobox',
displayField: 'name',
store: Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'name'}
],
data: [
{"name":"Alabama"},
{"name":"Alaska"},
{"name":"Arizona"},
{"name":"Arkansas"},
{"name":"California"}
]
}),
queryMode: 'local',
typeAhead: true
},{
xtype: 'numberfield',
name: 'numberfield1', //10
fieldLabel: 'Number field',
value: 20,
minValue: 0,
maxValue: 50
},{
xtype: 'checkboxfield', //11
name: 'checkbox1',
fieldLabel: 'Checkbox',
},{
xtype: 'radiofield', //12
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
},{
xtype: 'radiofield', //13
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
},{
xtype: 'multislider', //14
fieldLabel: 'Multi Slider',
values: [25, 50, 75],
increment: 5,
minValue: 0,
maxValue: 100
},{
xtype: 'sliderfield', //15
fieldLabel: 'Single Slider',
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
}]
.png)
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields Validation',
width: 340,
bodyPadding: 5,
renderTo: 'form-example',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'under'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Required',
allowBlank: false //1
},{
xtype: 'textfield',
name: 'textfield2',
fieldLabel: 'Min 2',
minLength: 2 //2
},{
xtype: 'textfield',
name: 'textfield3',
fieldLabel: 'Max 5',
maxLength: 5 //3
xtype: 'textfield',
name: 'textfield7',
fieldLabel: 'Regex - Phone',
regex: /^\d{3}-\d{3}-\d{4}$/, //4
regexText: 'Must be in the format xxx-xxx-xxxx'
},{
xtype: 'textfield',
name: 'textfield4',
fieldLabel: 'Email',
vtype: 'email' //5
},{
xtype: 'textfield',
name: 'textfield5',
fieldLabel: 'Alpha',
vtype: 'alpha' //6
},{
xtype: 'textfield',
name: 'textfield6',
fieldLabel: 'AlphaNum',
vtype: 'alphanum' //7
},{
xtype: 'textfield',
name: 'textfield6',
fieldLabel: 'Url',
vtype: 'url' //8
},{
xtype: 'textfield',
name: 'textfield8',
fieldLabel: 'Custom: IP Address',
vtype: 'IPAddress' //9
}]
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v););
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
.png)
Ext.create('Ext.form.Panel', {
title: 'Form with Label',
width: 100,
bodyPadding: 10,
renderTo: 'form-example',
items: [{
xtype: 'label',
forId: 'myFieldId',
text: 'Just a Label',
margins: '0 0 0 10'
}]
.png)
Ext.create('Ext.form.Panel', {
title: 'Book Info',
renderTo: 'form-example',
width: 300,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'hiddenfield',
name: 'bookId'},{
xtype: 'textfield',
name: 'bookName',
fieldLabel: 'Title'
},{
xtype: 'textfield',
name: 'bookAuthor',
fieldLabel: 'Author'
}],
buttons: [{
text: 'Load',
handler: function() {
var form = this.up('form').getForm();
form.load({
url: 'data/form.json',
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result. errorMessage);
}
});
}
},{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
form.submit({
url: 'form-submit.php',
waitMsg: 'Sending the info...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Form submitted.');
}
});
}
}]
{
success: true,
data: {
bookId: 10,
bookName: "Ext JS 4 First Look",
bookAuthor: "Loiane Groner"
}
Extjs4中的常用组件：Grid、Tree和Form的更多相关文章
- RN中的常用组件-----图片
1.RN中的常用组件-----图片 本地图片: <Image source={require('../src/assets/x.jpg')}/> 本地图片可以无需指定尺寸(因为导入/打包 ...
- .NET6中一些常用组件的配置及使用记录，持续更新中。。。
NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...
- java.util.concurrent中的常用组件
一. CountDownLatch 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. CountDownLatch的一个非常典型的应用场景是:有一个任务想要往下执 ...
- android 中的常用组件
gradle gradle 是个啥,一开始我也没弄清,官方解释是: Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具 那么Apache Ant和Apache ...
- android app开发中的常用组件
1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...
- cocos 常用组件
前面的话 本文将详细介绍 cocos 中的常用组件 Sprite [概述] Sprite(精灵)是 2D 游戏中最常见的显示图像的方式,在节点上添加 Sprite 组件,就可以在场景中显示项目资源中的 ...
- android开发常用组件【持续更新中。。。】
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
- ExtJS学习之路第三步：理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...
- SWT入门-常用组件的使用(转)
转自:http://www.cnblogs.com/kentyshang/archive/2007/08/16/858367.html swt的常用组件button ,text ,combo,list ...
随机推荐
- OpenGL———混合的基本知识
混合是一种常用的技巧,通常可以用来实现半透明.但其实它也是十分灵活的,你可以通过不同的设置得到不同的混合结果,产生一些有趣或者奇怪的图象.混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一 ...
- phpmyadmin配置方式
简单的说,phpmyadmin就是一种mysql的管理工具,安装该工具后,即可以通过web形式直接管理mysql数据,而不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管理者,下面 ...
- mysql 修改 添加 删除 表字段
添加表的字段 alter table 表名 add 字段名 字段的类型 例子: alter table table1 add transactor varchar(10) n ...
- SqlMapClient ，SqlExecutor 和SqlMapClientTemplate 的区别？
SqlMapClient SqlExecutor SqlMapClientTemplate
- ALAssetsLibrary 照片相关 浅析
ALAssetsLibrary 提供了访问iOS设备下”照片”应用下所有照片和视频的接口: 从 ALAssetsLibrary 中可读取所有的相册数据,即 ALAssetsGroup 对象列表: 从每 ...
- AutoTile 自动拼接（五） 学习与实践
今天不讲 权值检索,考虑到后期 自动拼接 做出来 更好玩,操作更方便.所以 今天我 补充一节, 网格计算与操作. 具体就是这么个效果,和地图编辑器一样,不过图块还是没有自然的拼接,这个一定一定是 下一 ...
- Python -- Web -- WSGI
WSGI:Web Server Gateway Interface 只要求Web开发者实现一个函数,就可以响应HTTP请求. # hello.py def application(environ, s ...
- Apache的安装
Apache的安装: 注:本例只截取需要注意的截图,其它默认则不显示. 1. 服务器信息可以按照默认配置,如果服务器的80端口没被其他服务器程序占据.可选“for All Users,on ...
- hdu_5110_Alexandra and COS(DP+分块思想)
题目连接:hdu_5110_Alexandra and COS 题意: 给你一个图,X代表宝藏,然后有一个船,它的声纳的频率为D,定船到宝藏的距离为Dis=max(abs(x1-x2),abs(y1- ...
- JavaBean--JavaBean与表单
SimpleBean.java: package cn.mldn.lxh.demo ; public class SimpleBean { private String name ; private ...