Filters are not showing in grid - javascript

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

Related

Extjs 6 - Filter grid with combobox

I want to sort my grid with a combobox, I want that when I select a value on the combobox, the content of the grid change for example by type can anyone help me? thanks
this a snippet of my code:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'pagingtoolbar',
store: pagingStore,
displayInfo: true,
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
store: storeCombo,
displayField: 'name'
}]
},
renderTo: Ext.getBody()
});

You probably want something like this:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone', 'type'],
data: [{
name: 'Homer',
email: 'homer#simpsons.com',
phone: '111-222-333',
type: 'Foo'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '111-222-334',
type: 'Foo'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '111-222-335',
type: 'Bar'
}, {
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '111-222-336',
type: 'Bar'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'toolbar',
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
forceSelection: true,
emptyText: '-- Select --',
store: {
fields: ['type'],
data: [{
type: 'Foo'
}, {
type: 'Bar'
}]
},
displayField: 'type',
valueField: 'type',
listeners: {
change: function(combo, value) {
var grid = this.up('grid'),
store = grid.getStore();
if (!value) {
store.getFilters().removeAll();
} else {
store.filter([{
property: 'type',
value: value
}]);
}
}
}
}
]
},
renderTo: Ext.getBody()
});
https://fiddle.sencha.com/#fiddle/1hn4

Update grid and form simultaneously

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
});
}
});

Got error with rowediting when scrolling

i try to use sencha cmd to create a project. But when using rowediting plugin, i got error
"SCRIPT5007: Unable to get property 'getAttribute' of undefined or
null reference"
whenever i scroll up/down over the editor on the grid.
Could you let me know what wrong here?
please click here to see more detail
Here my code look like:
Ext.define("Sample.view.common.HelloWorld",{
extend: "Ext.grid.Panel",
alias: 'widget.app-helloworld',
requires: [
'Ext.grid.plugin.RowEditing',
'PCS.config.Locale'
],
bind: '{hellostore}',
layout: {type: 'fit', align: 'stretch'},
initComponent: function() {
Ext.apply(this, {
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
pluginId: 'helloeditor',
errorsText: 'Warning',
listeners: {
cancelEdit: 'onCancelEdit',
validateedit: 'onValidateEdit',
edit: 'onEdit'
}
}],
columns: [
new Ext.grid.RowNumberer({
width: 30,
align: 'center'
}), {
header: this.lblSysNm,
dataIndex: 'sysCd',
width: 150,
align: 'center',
itemId: 'colSystem',
renderer: function(value, metaData){
return metaData.record.data.sysNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{systemCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblDept,
dataIndex: 'deptCd',
width: 180,
align: 'center',
itemId: 'colDept',
renderer: function(value, metaData){
return metaData.record.data.deptNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{deptCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblCountryCd,
dataIndex: 'cntyCd',
width: 120,
align: 'center',
itemId: 'colCountryCd',
editor: {
xtype: 'textfield',
maxLength : 2,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
fieldStyle: 'text-align: center;text-transform:uppercase',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblCountryNm,
dataIndex: 'cntyNm',
width: 170,
align: 'left',
itemId: 'colCountryNm',
editor: {
xtype: 'textfield',
maxLength : 50,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblReason,
dataIndex: 'reason',
width: 340,
align: 'left',
itemId: 'colReason',
editor: {
xtype: 'textfield',
maxLength : 200,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important'
}
}, {
header: this.lblLastUpd,
dataIndex: 'updUserId',
width: 100,
align: 'center',
itemId: 'colLastUpd',
editable: false
}, {
header: this.lblLastUpdDt,
dataIndex: 'updDt',
xtype: 'datecolumn',
format: 'Y-m-d H:i',
width: 150,
align: 'left',
itemId: 'colLastUpdDt',
editable: false
}
]
});
this.callParent();
}
});

Finding difficulty in loading a form on click of a button

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');
}

JSON Data not displaying on panel with multiple containers

I am trying to display this data in my js file but when I try to load the page, the data won't display. Am I doing the right thing?
JSON DATA:
{
"data": {
"batnbr":"1",
"tranid":"100001",
"trandate":"2013-01-20",
"trantype":"A",
"docstatus":"A",
"particulars":"test",
"coid":"test",
"brid":"test",
"cur":"test",
"exchangerate":"1.0000",
"doctype":"A",
"oktopost":"0",
"posted":"0",
"seqid":"1",
"jvdtl":[
{
"batnbr":"1",
"tranid":"100001",
"account":"test",
"subaccount":"test",
"linkto":"1",
"projectid":"test",
"budgetid":"test",
"importid":"test",
"particulars":"test",
"dramt":"1000.00",
"cramt":"1000.00",
"postref":"test",
"postrefid":"test",
"subledger":"test",
"lineseqid":"1",
"seqid":"1"
},{
"batnbr":"1",
"tranid":"100001",
"account":"test2",
"subaccount":"test2",
"linkto":"1",
"projectid":"test",
"budgetid":"test",
"importid":"test",
"particulars":"test",
"dramt":"2000.00",
"cramt":"2000.00",
"postref":"test",
"postrefid":"test",
"subledger":"test",
"lineseqid":"2",
"seqid":"2"
},{
"batnbr":"1",
"tranid":"100001",
"account":"test3",
"subaccount":"test3",
"linkto":"1",
"projectid":"test",
"budgetid":"test",
"importid":"test",
"particulars":"test",
"dramt":"3000.00",
"cramt":"3000.00",
"postref":"test",
"postrefid":"test",
"subledger":"test",
"lineseqid":"3",
"seqid":"3"
}
]
}
}
STORE TO GET THE HEADER
store_jvhdr = new Ext.data.JsonStore({
model: 'Jvhdr',
proxy: {
type: 'ajax',
url : './journalservlet?batNbr='+val.data.batnbr+'&operation=GET_RECORD',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
STORE TO GET THE DETAIL
store_jvdtl = new Ext.data.JsonStore({
model: 'Jvdtl',
proxy: {
type: 'ajax',
url : './journalservlet?batNbr='+val.data.batnbr+'&operation=GET_RECORD',
reader: {
type: 'json',
root: 'jvdtl'
}
},
autoLoad: true
});
MODEL
Ext.define('Jvhdr',{
extend: 'Ext.data.Model',
fields: [
{name: 'batnbr', type: 'int'},
...
]
});
Ext.define('Jvdtl',{
extend: 'Ext.data.Model',
fields: [
{name: 'batnbr', type: 'int'},
...
]
});
PANEL
....
xtype: 'container',
border: false,
layout: 'vbox',
items: [{
xtype: 'container',
border: true,
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
store: store_jvhdr,
items: [{
xtype: 'container',
border: true,
layout: 'vbox',
pack : 'start',
padding: '0, 20, 10, 10',
items: [
{
fieldLabel: 'Tran ID',
afterLabelTextTpl: required,
allowBlank: false,
labelWidth: 100,
dataIndex: 'tranid',
name: 'tranid',
xtype: 'textfield'
}
.....
}]
},{
xtype: 'container',
border: true,
layout: 'vbox',
padding: '0, 0, 10, 0',
flex: 1,
items: [{
fieldLabel: 'DocStatus',
afterLabelTextTpl: required,
labelWidth: 100,
allowBlank: false,
dataIndex: 'docstatus',
name: 'docstatus',
xtype: 'textfield',
anchor: '100%'
}
...
{
fieldLabel: 'DocType',
afterLabelTextTpl: required,
labelWidth: 100,
allowBlank: false,
dataIndex: 'doctype',
name: 'doctype',
xtype: 'textfield',
anchor: '100%'
}
]
}]
},{
xtype: 'container',
layout: 'anchor',
items: [{
xtype: 'grid',
store: store_jvdtl,
columns: [
new Ext.grid.RowNumberer(),
{
text: "BatNbr",
hidden: true,
dataIndex: 'batnbr'
},{
text: "TranID",
hidden: true,
dataIndex: 'tranid'
}
....
]
}]
}]
}]
....
Btw, I am using different containers to layout my panel.

Categories

Resources