I have this grid and would like to group 2 groups into a single group based on the status. Basically I want to put together "Cheched-In" and "Ready for MA" into a single group. Thanks a lot for the help!
Here's the working code: FIDDLE
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
columns: [
{ text: 'Box', dataIndex: 'box', width: 50 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Status', dataIndex: 'status', flex: 1 }
],
features: [{ftype:'grouping'}],
renderTo: Ext.getBody()
});
You can try to have a different field for grouping, try this
function addGroupField(data) {
return data.map(function(row) {
return {
box: row.box,
name: row.name,
status: row.status,
groupedStatus: [
'Checked-In',
'Ready for MA'
].indexOf(row.status) > -1 ? 'Checked-In & Ready for MA' : row.status,
}
});
}
var data = addGroupField([
{ box: '', name: 'Brady, Marsha',status: 'Checked-In' },
{ box: 'MA', name: 'Dwight, Schrute', status: 'With MA' },
{ box: 'MA', name: 'Jim, Halpert', status: 'With MA' },
{ box: 'MA', name: 'Mike, Brown', status: 'With MA' },
{ box: 'MA', name: 'Steve, Smith', status: 'With MA' },
{ box: 'MA', name: 'Lori, Morrison', status: 'With MA' },
{ box: 'MA', name: 'Mary, Loson', status: 'With MA' },
{ box: 'MA', name: 'Junior, Meloni', status: 'With MA' },
{ box: 'MA', name: 'Jim, Halpert', status: 'With MA' },
{ box: '', name: 'Kevin, Malone', status: 'Checked-In' },
{ box: '', name: 'Angela, Martin', status: 'Checked-In' },
{ box: '2', name: 'Jim, Halpert', status: 'Ready for MA' },
{ box: '2', name: 'Kevin, Malone', status: 'Ready for MA' },
{ box: '2', name: 'Angela, Martin', status: 'Ready for MA' }
]);
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'seniority', 'department'],
groupField: 'groupedStatus',
data: data
});
Ext.onReady(function() {
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
columns: [
{ text: 'Box', dataIndex: 'box', width: 50 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Status', dataIndex: 'status', flex: 1 }
],
features: [{ftype:'grouping'}],
renderTo: Ext.getBody()
});
});
Related
Help Me please !! What happened to this error? I changed the class name of the table, but I cannot change it and this error occurs?
new gridjs.Grid({
columns: [{ name: 'ID', width: '60px' },
{ name: 'Name', width: '200px' },
{ name: 'Position', width: '300px' },
{ name: 'Email', width: '200px' },
{ name: 'Tel', width: '100px' },
{ name: '', width: '40px', sort: false }],
sort: true,
search: true,
pagination: {
limit: 5,
},
className: {
table: 'table',
thead: 'thead-dark'
},
language: {
'search': {
'placeholder': ' Search...'
},
},
server: {
url: 'http://localhost:55289/ManageUser/GetUserList',
then: data => data.map(user => [user.id,
user.first_name + '\xa0\xa0\xa0' + user.last_name,
user.position, user.email,
user.tel_mobile,
gridjs.html(`<a id="button-delete" href="/ManageUser/Delete/${user.id}"><button class="btn btn-danger"><i class="fa fa-close"></i></button></a>`)])
}
}).render(document.getElementById("user-table"));
As Tammy mentioned, you need to define a custom id for your column:
const grid = new Grid({
columns: [{
id: 'name',
name: 'Name'
}, {
id: 'email',
name: 'Email'
}, {
id: 'phoneNumber',
name: 'Phone Number'
}],
data: [
{ name: 'John', email: 'john#example.com', phoneNumber: '(353) 01 222 3333' },
{ name: 'Mark', email: 'mark#gmail.com', phoneNumber: '(01) 22 888 4444' },
]
});
Demo: https://gridjs.io/docs/examples/import-json
I had the same issue:
Could not find a valid ID for one of the columns.
Make sure a valid "id" is set for all columns
And the fix was what Tammy mentions, I had an empty named column.
I want to make two grids in two side-by-side panels. I tried with following code:
Ext.define('BlackWhiteList', {
extend: 'Ext.panel.Panel',
xtype: 'blackwhitelist',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [
grid
]
},
{
title: 'White List',
items: [
grid
]
}
]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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: '555-222-1254' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
But at the moment in only shows me the title "Black List" and "White List" with empty content. I get no error messages or anything which can show me what is wrong here.
I use ExtJS 6.
This is really a tricky question, You will need to fix 2 things in your code so that your code work.
First is how you are defining the grid and where you used it, the a/m code will yield undefined value for the grid by the time of execution. why? this is related to hoisting in JS, the JS will recognize the grid variable but will not assign it's value so when you are creating your Ext panel you have grid value equals to undefined.
So first thing is to move the var grid block of code to the top.
But now you will face a 2nd problem you will see only one grid is rendered, why?
Because the grid is an object which is reference type, and this will make the two panels try to show the same grid and this is impossible so it is shown only on one place.
So to fix this problem you need to use Ext.define for the grid and assign xtype to it, so when you use xtype in the panel more than one time Ext will create 2 complete diffrent instance of your grid. Or you can make var grid1 and var grid2 but this is not good
Finally a working example Fiddle
Code Sample
App.js
Ext.application({
name: 'Test',
requires: ['Test.MyGrid'],
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [{
xtype: 'myGrid'
}]
}, {
title: 'White List',
items: [{
xtype: 'myGrid'
}]
}
]
});
}
});
app/MyGrid.js
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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: '555-222-1254' }
]
});
Ext.define('Test.MyGrid', {
extend:'Ext.grid.Panel',
store: store,
xtype:'myGrid',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
Hope I made things clear :)
I have written a simple ExtJS grid with a column renderer that returns an HTML hyperlink for an onclick to call a simple JavaScript function.
Unfortunately, when I click it shows function undefined in the browser console. Any Help is Appreciated.
function myALert() {
alert("yo");
}
function columnRenderer(val) {
return 'View'
}
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
renderer: columnRenderer
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
The use of global functions in this case where it will be used in only one column is not recommended.
I suggest using Action Column, which has the handler property that performs a function on the click. See this documentation here.
If it is necessary to use a link (tag a), I suggest using Template Column, where you can create the template you prefer using HTML markup and other resources. See this documentation here.
Take a look in this forked fiddle from Akrion. There is one grid with Action Column and another with Template Column.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons (Grid with Action Column)',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
xtype: 'actioncolumn',
text: 'Phone',
dataIndex: 'phone',
align: 'center',
icon: 'https://cdn2.iconfinder.com/data/icons/ledicons/eye.png',
getTip: function(value) {
return value;
},
handler: function(grid, rowIndex, colIndex, item, e, record) {
alert("Yo! " + record.get('phone'));
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons (Grid with Template Column)',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
xtype: 'templatecolumn',
text: 'Phone',
dataIndex: 'phone',
align: 'center',
tpl: new Ext.XTemplate(
'{phone}',
{
myAlert: function(values){
return "javascript:alert('Yo! "+values.phone+"')";
}
}
)
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
I have a JSFiddle Demo which creates a Grid with editing enabled. The problem I am facing is that the textfields that are displayed when editing a row are too narrow. They are about half the column width.
// Data to be bound to the grid.
var albums = [{
title: 'Frampton Comes Alive!',
artist: 'Peter Frampton',
genre: 'Rock',
year: '01/06/1976'
}, {
title: 'Led Zeppelin II',
artist: 'Led Zeppelin',
genre: 'Rock',
year: '10/22/1969'
}, {
title: 'Queen',
artist: 'Queen',
genre: 'Rock',
year: '07/13/1973'
}];
// Imports
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Models
Ext.define('AlbumManager.model.Album', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
type: 'string'
}, {
name: 'artist',
type: 'string'
}, {
name: 'genre',
type: 'string'
}, {
name: 'year',
type: 'date',
dateFormat: 'm/d/Y'
}]
});
// Stores
Ext.define('AlbumManager.store.AlbumStore', {
extend: 'Ext.data.JsonStore',
storeId: 'albumStore',
model: 'AlbumManager.model.Album',
data: albums,
autoLoad: 'true'
});
// Plugins
Ext.define('AlbumManager.plugin.AlbumEdit', {
extend: 'Ext.grid.plugin.RowEditing',
clicksToMoveEditor: 1,
autoCancel: false
});
// Create view DOM onReady.
Ext.onReady(function () {
// Store
var albumStore = Ext.create('AlbumManager.store.AlbumStore');
var rowEditing = Ext.create('AlbumManager.plugin.AlbumEdit');
var grid = Ext.create('Ext.grid.GridPanel', {
id: 'gridPanel',
title: 'Albums',
width: 400,
height: 200,
renderTo: 'grid-example',
store: albumStore,
columns: [{
header: 'Album Title',
dataIndex: 'title',
flex: 1,
editor: {
width: 300,
allowBlank: false
}
}, {
header: 'Artist',
dataIndex: 'artist',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Genre',
dataIndex: 'genre',
width: 60,
editor: {
allowBlank: true
}
}, {
header: 'Year',
dataIndex: 'year',
width: 60,
editor: {
xtype: 'datefield',
allowBlank: true
},
renderer: Ext.util.Format.dateRenderer('M Y')
}],
plugins: [rowEditing],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Add New Album',
handler: function () {
// Create a model instance
var r = Ext.create('AlbumManager.model.Album', {
title: 'New Album',
artist: 'New Artist'
});
albumStore.insert(0, r);
rowEditing.startEdit(0, 0);
},
disabled: false
}, {
xtype: 'button',
text: 'Delete Album',
handler: function () {
Ext.MessageBox.confirm('Delete', 'Are you sure ?', function (btn) {
if (btn === 'yes') {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
albumStore.remove(sm.getSelection());
if (albumStore.getCount() > 0) {
sm.select(0);
}
}
});
},
disabled: false
}]
}]
});
});
In your fiddle you use javascript from Ext JS 4.2.0 version but CSS from Ext JS 4.0.2a version.
You always should use javascript files and CSS from same version of Ext JS framework. Otherwise you can get unexpected results as you can see in your fiddle.
When I setup your fiddle with javascript and CSS from Ext JS 4.2.1 version, everything works without problems: https://fiddle.sencha.com/#fiddle/3ft
I'm trying to create a grid (Ext.grid.Panel) and fill it with data. But something is going wrong so the grid shows empty rows without data.
Model is:
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
{
id: 'companyId',
type: 'int'
},
{
id: 'amount',
type: 'int'
},
{
id: 'dealDate',
type: 'date'
},
{
id: 'complete',
type: 'int' //boolean imitation
}
],
idProperty: 'id'
});
Grid & Store code is:
var orders = Ext.create('Ext.data.Store', {
model: 'Order',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/orders-data.php?',
reader: Ext.create('Ext.data.reader.Json', {
root: 'orders'
})
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
orders.load();
var ordersGrid = Ext.create('Ext.grid.Panel', {
width: 400,
height: 300,
store: orders,
columns: [
{
text: 'Amount',
dataIndex: 'amount',
width: 120
},
{
text: 'Deal date',
dataIndex: 'dealDate',
width: 120
},
{
text: 'Complete',
dataIndex: 'complete',
width: 120
}
]
});
JSON-response from server is:
{
"orders":[
{
"id":1,
"amount":5000,
"dealDate":"2012-01-05",
"complete":0
},
{
"id":2,
"amount":6850,
"dealDate":"2012-01-07",
"complete":0
},
{
"id":5,
"amount":7400,
"dealDate":"2012-01-09",
"complete":0
}
]
}
Why does the grid display empty rows?
All your model's fields but the first are being declared with 'id' properties where they should instead be using 'name':
{
name: 'id',
type: 'int'
},
{
name: 'companyId',
type: 'int'
},
{
name: 'amount',
type: 'int'
},
{
name: 'dealDate',
type: 'date'
},
{
name: 'complete',
type: 'int' //boolean imitation
}