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 ...
随机推荐
- JPA 系列教程2-单表操作
JPA Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据.他的出现主要是为了简化现有的持久化开发工作和整合ORM技术,结束现在Hibe ...
- PHP商品倒计时 php实现当前用户在线人数
//PHP商品倒计时 date_default_timezone_set("Asia/shanghai");//地区 //配置每天的活动时间段 $starttimestr = &q ...
- Lucene + Hadoop 分布式搜索运行框架 Nut 1.0a9转自http://www.linuxidc.com/Linux/2012-02/53113.htm
1.概述 不管程序性能有多高,机器处理能力有多强,都会有其极限.能够快速方便的横向与纵向扩展是Nut设计最重要的原则,以此原则形成以分布式并行计算为核心的架构设计.以分布式并行计算为核心的架构设计是N ...
- 篇一：eclipse创建maven工程
一.概览 maven创建的项目主要分为三类:war(网页工程).jar(Java工程).pom(父工程); war:网页工程,包含webapp,用于view层 jar:Java工程,用于提供方法.se ...
- Chapter 1 First Sight——21
They were sitting in the corner of the cafeteria, as far away from where I sat as possible in the lo ...
- Entity Framework 学习初级篇7--基本操作：增加、更新、删除、事务
本节,直接写通过代码来学习.这些基本操作都比较简单,与这些基本操作相关的内容在之前的1至6节基本介绍完毕. l 增加: 方法1:使用AddToXXX(xxx)方法:实例代码如下: ...
- httpwebrequest 模拟登录 获取cookies 以前的代码,记录备忘!
2个类,一个基类,一个构建头信息调用类 关于如何获取到post中的内容,你之需要用http抓包工具把你与目标网站的请求信息抓下来后,打开分析下按照抓下来的包中的数 据进行构建就行了 using Sys ...
- 关于MyEclipse 半天打不开的问题（工作区间损坏）--转
删掉 {workspace}/.metadata/.plugins\**\*.snap 所有的 .snap文件 一般可以解决问题 如果上面一步解决不了问题, 那么删掉 {workspace}/.met ...
- javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获，看到这篇文章加深了理解)
原文地址:http://javascript.info/tutorial/bubbling-and-capturing 先给出最终的结论: Summary Events first are captu ...
- Oracle获取系统时间及格式化
Oracle 获取当前日期及日期格式 获取系统日期: SYSDATE() 格式化日期: TO_CHAR(SYSDATE(),'YY/MM/DD HH24:MI:SS) ...