按钮
使用 listeners 配置添加更多的事件处理器
Ext.create('Ext.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
listeners: {
click: {
fn: function(){
//Handle click event
alert('click');
}
},
mouseout: {
fn: function(){
//Handle double click event
alert('Mouse out');
}
}
}
});
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'Do you want to save the file?',
buttons: Ext.MessageBox.YESNO,
// 自定义：
buttonText: {yes:'ok?'},
fn: function(button){
if('yes'==button){
}else if('no'==button){
}
},
icon: Ext.MessageBox.QUESTION
}) ;
Store?
下列代码是一个 store 的例子，它使用 RESTful API 请求加载为 JSON 格式数据：
var myStore = Ext.create('Ext.data.Store', {
model: 'Employee',
storeId: 'mystore',
proxy: {
type: 'rest',
url: '/employee',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true,
autoSync: true
});
store-grid
- 通过renderer向数据添加HTML,URL,图片，符号
-
过滤
通过添加 Ext.grid.filters.Filters (ptype: gridfilters) 插件到 grid 并对列进行配置可以很容易实现过滤功能：
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
// gridfilters插件 -- 筛选
plugins: 'gridfilters',
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname',
// 设置筛选格式
filter:'string'
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1,
// 设置筛选格式
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for…'
}
}
},{
text: 'price',
width: 100,
dataIndex: 'price',
renderer: function(value){
// 添加'$'符号
return Ext.String.format('${0}',value);
}
}]
});
}
});
// store数据
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [ 'id', 'productname', 'desc', 'price' ]
});
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
data: [{
id: 'P1',
productname: 'Ice Pop Maker',
desc: 'Create fun and healthy treats anytime',
price: '16.33'
}, {
id: 'P2',
productname: 'Stainless Steel Food Jar',
desc: 'Thermos double wall vacuum insulated food jar',
price: '14.87'
},{
id: 'P3',
productname: 'Shower Caddy',
desc: 'Non-slip grip keeps your caddy in place',
price: '17.99'
}, {
id: 'P4',
productname: 'VoIP Phone Adapter',
desc: 'Works with Up to Four VoIP Services Across One Phone Port',
price: '47.50'
}]
});
store-grid
