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()
});
}
});
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
});
}
});
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'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.
Here's my code that works just fine.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});
Ext.onReady(function () {
// Ajax call
var usersFromAJAX = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'customers'
}
}
});
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: usersFromAJAX,
id: 'user',
title: 'Employees',
iconCls: 'x-fa fa-users',
listeners: {
itemclick: function (view, index, item, record) {
var window = Ext.create('Ext.window.Window', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
record: record,
viewModel: {
data: {
employee: index.data// employee's name
}
},
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'firstname',
fieldLabel: 'First Name',
bind: '{employee.name}' // biding employee's name
},
{
xtype: 'textfield',
name: 'firstname',
fieldLabel: 'Email',
bind: '{employee.email}' // biding employee's name
},
{
xtype: 'toolbar',
docked: 'bottom',
style:{
background: "#ACCCE8",
padding:'20px'
},
items: ['->', {
xtype: 'button',
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
console.log("Updating name...");
// Need to add something in here
this.up('window').close();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
// this.up('formpanel').destroy();
this.up('window').close();
//this.up('window').destroy();
}
}]
}]
})
window.show();
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: Ext.getElementById("myTable")
});
});
</script>
</head>
<body>
<div id="myTable"></div>
</body>
</html>
Here's the JSON that populates my table.
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "henry#email.com"
},
{
"id": 2,
"name": "Lucy",
"email": "lucy#email.com"
},
{
"id": 3,
"name": "Mike Brow",
"email": "Mike#email.com"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "mary#email.com"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "beto#email.com"
}
]
}
Binding is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:
Fiddle
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
Ext.onReady(function () {
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
},
listeners: {
itemclick: function (view, record) {
var f = Ext.create('Ext.form.Panel', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
buttons: [{
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
f.updateRecord(record);
f.close();
}
}, {
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
f.close();
}
}],
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'name',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
})
f.show();
f.loadRecord(record);
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: document.body
});
});
I made a grid. How I can edit selected row in a modal window using ext js 4? This is my code:
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
renderTo: Ext.getBody()
});
#k_b
Check if this helps you, it is just one first step for you understand the logic.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'surname', type: 'string'},
{name: 'date', type: 'date'}
]
});
var data = {
users: [
{
name: 'Ed Spencer',
surname : 'Jobs'
},
{
name: 'Ed Spencer2',
surname : 'Jobs2'
}
]
};
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
listeners:
{
scope: this,
selectionchange: function(model, records){
var rec = records[0];
if (rec) {
var editform = Ext.create('Ext.form.Panel', {
width: 390,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name: 'surname',
fieldLabel: 'Surname'
}
],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form');
form.updateRecord();
var record = form.getForm().getRecord();
Ext.Msg.alert('Record',record.get('name'));
record.save();
}}]
});
Ext.create('Ext.window.Window', {
title: 'Edit',
height: 200,
width: 400,
layout: 'fit',
items: [
editform]
}).show();
editform.getForm().loadRecord(rec);
}
}
},
renderTo: Ext.getBody()
});
https://jsfiddle.net/ep24cc30/4/
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/