I want to group the values in grid panel
Below is the code:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "School Friends", expanded: true, children: [
{ text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"},
{ text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"}
] },
{ text: "Facebook Friend", expanded: true, children: [
{ text: "Steve", leaf: true, name: "Steve", email: "steve#stackoverflow.com", phone: "345-2222"},
{ text: "Lisa", leaf: true, name: "Lisa", email: "lisa#stackoverflow.com", phone: "345-3333"}
] },
]
}});
Ext.create('Ext.tree.Panel', {
title: 'All My Friends',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners : {
itemdblclick : function(tree, record, index){
Ext.getStore('simpsonsStore').loadRawData([record.raw], true);
}
}});
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}});
Ext.create('Ext.grid.Panel', {
title: 'Best Friends',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()});
From the above code I am able to get the values from treepanel to grid panel by double clicking.
I want an extra column to group values if we double click the same leaf in the treepanel.
For example if we double click Bart 6 times
Name email phonenumber groupby(number of times)
Bart bart#simpsons.com 555-222-1234 6
It should not append same value in the grid panel.
Could any one please help me.
Regards,
sreekanth
You'll need to add a count field to your store's fields. Then, you'll need to add the field to your grid. When you double-click the tree, you'll need to check the store to see if the record already exists. If it does, change the value in the count field; otherwise, add a new row.
itemdblclick: function (tree, record, index) {
var s = Ext.getStore('simpsonsStore'),
existingRecIdx = s.findBy(function (r) {
return r.get('email') === record.raw['email'];
});
if (existingRecIdx === -1) { //row not found
record.raw.clickCt = 1;
s.loadRawData([record.raw], true);
} else {
var r = s.getAt(existingRecIdx);
r.data.clickCt++;
grid.getView().refresh(); //once the data has changed
//refresh the grid
}
}
See http://jsfiddle.net/Kk7gL/
Related
In ExtJS Modern 6.2 how can I add multiple buttons to a grid cell?
I have seems examples using widgetcell but this seems to only work for a single button.
What I would like to do is have 2 buttons where one is always hidden depending on value in row.
You can use segment button as a widget:
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'homeHidden'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"homeHidden": true
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"homeHidden": false
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244",
"homeHidden": true
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"homeHidden": false
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
itemConfig: {
viewModel: true
},
rowViewModel: true,
store: store,
columns: [{
text: 'Tool',
cell: {
xtype: 'widgetcell',
widget: {
xtype: 'segmentedbutton',
allowToggle: false,
items: [{
iconCls: 'x-fa fa-home',
bind: {
hidden: '{record.homeHidden}'
},
handler: function (btn, evt) {
const record = btn.up('widgetcell').getRecord();
console.log("Button Home", record.getData());
}
}, {
iconCls: 'x-fa fa-user',
handler: function (btn) {
const record = btn.up('widgetcell').getRecord();
console.log("Button User", record.getData());
}
}]
}
}
}, {
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
layout: 'fit',
fullscreen: true
});
}
});
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 have a grid in which I have added headerCheckbox to get the functionality of Select/Deselect All. Also added checkchange event to the checkcolumn. The event works fine when I manually select/deselect any checkbox, but it does not fire when I do the selection via the header checkbox.
So my requirement is like whenever there is any selection change in the checkbox the event should get fired.
This is my column in Grid:
{
xtype: 'checkcolumn',
dataIndex: 'xyz',
text: '',
headerCheckbox: true,
width: 25,
stopSelection: true,
sortable: false,
draggable: false,
resizable: false,
menuDisabled: true,
hideable: false
}
An event in the Controller:
control: {
'checkcolumn':{
checkchange: 'onCheckChange'
}
},
onCheckChange : function ( checkbox, rowIndex, checked, record, e, eOpts ) {
console.log(record);
}
To catch the column header check change event you need to listen 'headercheckchange':
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'active'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
active: true
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
active: true
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
height: 200,
width: 400,
renderTo: Ext.getBody(),
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
headerCheckbox: true,
text: 'Active',
dataIndex: 'active',
listeners: {
headercheckchange: function(checkColumn, checked) {
console.log("Header Checkbox change event: ", checked);
},
checkchange: function(checkboxColumn, rowIndex, checked, record, e, eOpts ) {
console.log("Grid body column checkbox change event: ", rowIndex, checked, record);
}
}
}]
});
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()
});
}
});