// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = true;
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier
reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [{//id filter
type: 'numeric',
dataIndex: 'USER_PK'
},
{//email filter
type: 'string',
dataIndex: 'EMAIL',
},
{//is active filter
type: 'boolean',
dataIndex: 'ISACTIVE'
},
{//user role id filter
type: 'numeric',
dataIndex: 'USERROLEID'
}]
};
Ext.define('MyApp.view.ui.UsersDetail', {
extend: 'Ext.panel.Panel',
style: "margin: 0px auto 0px auto;", // center the form panel
frame: true,
height: 450,
width: 410,
autoScroll: true,
layout: {//panel layout
align: 'stretch',
type: 'vbox'
},
title: '<span class="gridPanelText">Users</span>',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{//grid panel data columns
xtype: 'gridpanel',
itemId: 'grid',
store: 'UserStore',
features: [filters],// filter-grid
plugin feature
flex: 1,
columns: [
{//id column
xtype: 'numbercolumn',
width: 40,
dataIndex: 'USER_PK',
filter: {type: 'int'},
format: 0
},
{//email column
xtype: 'gridcolumn',
width: 165,
dataIndex: 'EMAIL',
filter: {type: 'string',test:
"/^{0}/"},//https://github.com/nene/filter-row
text: 'Email'
},
{//is active column
xtype: 'booleancolumn',
width: 80,
dataIndex: 'ISACTIVE',
filter: {type: 'boolean'},
text: 'Is Active'
},
{//user role id column
xtype: 'numbercolumn',
width: 90,
dataIndex: 'USERROLEID',
filter: {type: 'int'},
text: 'Role',
format: 0
}
],
viewConfig: {
}
}
],
dockedItems: [
{//button toolbar
xtype: 'toolbar',
flex: 1,
dock: 'top',
items: [
{//add button
xtype: 'button',
id:'addbutton',
iconCls: 'addIcon',
text: 'Add',
handler: function(){
alert('Add button clicked!');
}
},
{//edit button
xtype: 'button',
id:'editbutton',
iconCls: 'editIcon',
text: 'Edit',
handler: function(){
alert('Edit button clicked!');
}
},
{//delete button
xtype: 'button',
id:'deletebutton',
iconCls: 'deleteIcon',
text: 'Delete',
handler: function(){
alert('Delete button clicked!');
}
},
{
xtype: 'tbseparator'
},
{//import button
xtype: 'button',
id:'importbutton',
iconCls: 'importIcon',
text: 'Import',
handler: function(){
alert('Import button clicked!');
}
},
{
xtype: 'tbseparator'
},
{//export button
xtype: 'button',
id:'exportbutton',
iconCls: 'exportIcon',
text: 'Export',
handler: function(){
alert('Export button clicked!');
}
}
]
},
{//quick serach toolbar
xtype: 'toolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'textfield',
width: 323,
id:'search'
},
{
xtype: 'tbspacer'
},
{//combo
xtype: 'combobox',
width: 67,
editable: false,
value: 'AND',
displayField: 'comboList',
queryMode: 'local',
store: 'MyArrayStore',
valueField: 'comboList'
}
]
},
{//paging toolbar
xtype: 'pagingtoolbar',
width: 400,
displayInfo: true,
store: 'UserStore',
flex: 1,
dock: 'bottom'
}
]
});
me.callParent(arguments);
}
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:349599
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
