《Ext JS 4 First Look》翻译之五：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'));
}
}]
}]
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'
}]
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'
}]
});
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'
}]
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'
}]
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
})
]
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
})
]
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'
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
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
}]
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
}]
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
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'
}]
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"
}
欢迎添加我的公众号一起深入探讨技术手艺人的那些事！
如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！
