Related
I am trying to impliment filters in my grid but I am unable to do it. Please help me to solve it as i am new to Extjs.
I am using sencha fiddle to run this and when i tried to impement filter in grid as
"features : [filters]"
please look to this also
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging']);
filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [{
type: 'numeric',
dataIndex: 'Id'
}, {
type: 'string',
dataIndex: 'fname'
}, {
type: 'string',
dataIndex: 'lname'
}, {
type: 'date',
dataIndex: 'date'
},{
type: 'numeric',
dataIndex: 'age'
},/*{
type: 'string',
dataIndex: 'genderId'
}*/,{
type: 'string',
dataIndex: 'email'
},{
type: 'numeric',
dataIndex: 'phone'
}]
};
// grid
title : 'Employee table',
xtype : 'grid',
stripRows : true,
columnLines : true,
store : Ext.data.StoreManager.lookup('employeeStore'),
width :'100%',
features : [filters]
columns:
[
{
header : 'ID', dataIndex: 'Id', flex:0.5 ,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'First Name', dataIndex: 'fname', flex:1 ,sortable : false,filterable: true,
filter:
{
type: 'string'
},
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Last Name', dataIndex: 'lname', flex:1,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'DOB', dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Gender', dataIndex: 'genderId', flex:0.5,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Age', dataIndex: 'age', flex:0.5,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Country', dataIndex: 'country', flex:1,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Email', dataIndex: 'email', flex:2,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Phone', dataIndex: 'phone', flex:1,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
}
}
],
If you are using extjs 6 version , then below code is useful for you.
You have to give 'gridfilters' plugin to grid to display filters.
var grid = Ext.create('Ext.grid.Panel', {
title : 'Employee table',
stripRows : true,
columnLines : true,
store : Ext.data.StoreManager.lookup('employeeStore'),
width :'100%',
plugins: ['gridfilters'],
columns:
[
{
header : 'ID', dataIndex: 'Id', flex:0.5 ,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'numeric'
}
},
{
header : 'First Name', dataIndex: 'fname', flex:1 ,sortable : false,filterable: true,
filter:
{
type: 'string'
},
editor:
{
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Last Name', dataIndex: 'lname', flex:1,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'string'
}
},
{
header : 'DOB', dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'date'
}
},
{
header : 'Gender', dataIndex: 'genderId', flex:0.5,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'string'
}
},
{
header : 'Age', dataIndex: 'age', flex:0.5,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'numeric'
}
},
{
header : 'Country', dataIndex: 'country', flex:1,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'numeric'
}
},
{
header : 'Email', dataIndex: 'email', flex:2,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'string'
}
},
{
header : 'Phone', dataIndex: 'phone', flex:1,filterable: true,
editor:
{
xtype: 'textfield',
allowBlank: false
},
filter:
{
type: 'numeric'
}
}
]
});
Running example is on link Grid Filters
My app has a grid and a form (for record detail).
when I update a record I intended to be simultaneously updated the grid and the form (before store.sync()).
Any idea how to do this?
In the case of my fiddle, after the update (edit button), the form only updates if you click in another grid row and re-click again on the edited row.
Fiddle: https://fiddle.sencha.com/#fiddle/12v7
EDITED: see comments.
https://fiddle.sencha.com/#fiddle/1303
Use data binding: Fiddle
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: ''
}]
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
xtype: 'layout-horizontal-box',
width: 800,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
flex: 1,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{user}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 2
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 2
}],
tbar: [{
xtype: 'form',
items: [{
xtype: 'textfield',
name: 'name',
bind: '{user.name}'
}, {
xtype: 'textfield',
name: 'email',
bind: '{user.email}'
}, {
xtype: 'textfield',
name: 'phone',
bind: '{user.phone}'
}]
}],
}, {
xtype: 'form',
flex: 1,
margin: '0 10 0 0',
items: [{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'name',
bind: '{user.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
name: 'email',
bind: '{user.email}'
}, {
xtype: 'displayfield',
fieldLabel: 'Phone',
name: 'phone',
bind: '{user.phone}'
}]
}]
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 800,
height: 400
});
}
});
I have a grid panel and it contains an add button. On clicking the button, a pop of form should be displayed. But I am getting this error continuously. GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438244873178 404 (Not Found)
Here is my List.js file that contains the grid
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
listeners: {
click: 'onDelete'
}
}]
}
]
});
And here is the controller
onAdd: function(button, e, options)
{
this.createDialog(null);
},
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
And heres the Student Form
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
alias: 'widget.student-form',
height: 270,
width: 400,
layout: {
type: 'fit'
},
title: 'Add Student',
closable: false,
modal: true,
items: [{
xtype: 'form',
reference: 'form',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: '75'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name'
},
{
fieldLabel: 'Address'
},
{
fieldLabel: 'Phone'
},
{
fieldLabel: 'Email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
editable: false,
name: 'faculty-id',
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
}]
});
So, how can I load the Student form as a pop up window. Any suggestion?
heres the error list:
GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438247043981 404 (Not Found)
Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.student-form
[E] [Ext.Loader] Some requested files failed to load.
In your controller's method change from:
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
To:
createDialog: function(record)
{
Ext.createWidget('student-form');
}
My basic problem is this, I have a page with 3 grids, all of which have paging toolbars. All grid render on page load. When the page loads, only 1 of the 3 toolbars actually works. The other 2 don't show page numbers, and all buttons are greyed out. I've tried everything I can think of, but if they all populate on page load, only 1 works. If they render separately, say with a button click on the page, the toolbars work perfectly.
Has anyone else had this issue and solved it?
Multiple Grid and Multiple Paging Toolbar in single Window on page Load in Extjs
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore1 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore2 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
Ext.create('Ext.window.Window', {
height: 600,
width: 400,
xtype: 'panel',
layout: 'fit',
title:'Multiple Grid and Multiple Toolbar in single Window on page Load',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout: 'fit',
items: [
{
xtype: 'grid',
store: userStore1,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore1,
dock: 'bottom',
displayInfo: true,
},
]
},
{
xtype: 'panel',
region: 'center',
items: [
{
xtype: 'grid',
store: userStore2,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore2,
dock: 'bottom',
displayInfo: true,
}]
},
{
xtype: 'panel',
region: 'south',
items: [
{
xtype: 'grid',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
}],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore,
dock: 'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});
I tried to add validation to my form using formBind: true
The validation isn't occuring though (the save button is not greyed out). The validation that the text field is not blank is occuring, but binding it to the Save button seems to do nothing.
If you double click a record it will show the form in question. This can be seen here:
http://jsfiddle.net/byronaltice/7yz9oxf6/32/
Code below in case anyone can't access jsfiddle:
Ext.application({
name: 'MyApp',
launch: function () {
//Popup form for items in grid panel
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
padding: 5,
width: 600,
title: 'Edit Sessions',
model: 'true',
items: [{
xtype: 'form',
bodyPadding: 10,
title: '',
items: [{
xtype: 'textfield',
name: 'title',
fieldLabel: 'Title',
labelWidth: 90,
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
allowBlank: false
}, {
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved'
}]
}, {
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Save',
formBind: 'true',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
//The grid panel area
Ext.define("SessionGridPanel", {
extend: 'Ext.grid.Panel',
alias: 'widget.sessionGridPanel',
listeners: {
itemdblclick: function (gridpanel, record, item, e) {
var formWindow = Ext.create('SessionForm');
formWindow.show();
var form = formWindow.down('form');
form.loadRecord(record);
}
},
store: {
fields: [
'id', {
name: 'title',
sortType: 'asUCText'
},
'approved', {
dateFormat: 'c',
name: 'sessionTimeDateTime',
sortType: 'asDate',
type: 'date'
}, {
convert: function (v, rec) {
var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
pretty = convertIt(rec.get("sessionTimeDateTime"));
return pretty;
},
name: 'sessionTimePretty',
type: 'string'
}],
autoLoad: true,
autoSync: true,
data: [{
id: 101,
sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
title: 'JS for D',
approved: true
}, {
id: 102,
sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
title: 'CS for S',
approved: false
}, {
id: 105,
sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
title: 'XxtJS for E',
approved: false
}, {
id: 104,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ZXxtJS for E',
approved: true
}, {
id: 103,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ExtJS for E',
approved: true
}],
sorters: [{
property: 'title'
}],
groupField: 'sessionTimeDateTime'
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title',
flex: 1,
minWidth: 100,
width: 75
}, {
xtype: 'gridcolumn',
dataIndex: 'approved',
text: 'Approved'
}, {
dataIndex: 'sessionTimePretty',
text: 'Session Start Time',
width: 180
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: [
'{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
//align: 'stretch'
},
items: [{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
split: true,
items: [{
xtype: 'sessionGridPanel',
flex: 1
}, {
xtype: 'splitter',
width: 1
}, {
html: '<b>Speakers Panel</b>',
flex: 1,
xtype: 'panel'
}]
}, {
region: 'center',
html: '<b>Details Panel</b>',
flex: 1,
xtype: 'panel',
title: 'Details Panel',
collapsible: true,
collapsed: true,
collapseDirection: 'right'
}]
});
}
});
From Sencha API Documentation:
Any component within the FormPanel can be configured with formBind: true.
The problem is you are using the attribute formBind outside the form component
You can correct your code in this way:
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
// ...
items: [{
xtype: 'form',
items: [{
// your form items
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
handler: function (button) {
// also you should rewrite the following line
// to make it independant from the components structure
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
Your fiddle changed: http://jsfiddle.net/7yz9oxf6/34/