Develop Reference

Create two grids in seperated panels - Ext JS

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 :)

How to have reference to an accordin in ExtJS?

I'm working with an accordion that has 10 grids inside of it. So basically I would like to access each grid in the accordian but not really sure how to accomplish that in ExtJS.
Example: If I want to target a grid I can do this:
Ext.ComponentQuery.query('grid');
But if I use the above code it will target all of the grids from the UI and I don't want that. I ONLY want to target the grids from my accordian.
layout: {
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
multi: true,
overflowHandler: 'scroller'
}
Any ideas how to do that? Thank you in advance!

First thing accordion is not an xtype.
Accordion is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time.
As you ONLY want to target the grids from your accordian
if you have created your custom xtype:'accordion' then you can get like this me.down('accordion').query('grid') if me contain xtype:'accordion'.
If you have define reference then you can get like this lookupReference using controller or lookupReference using view.
Here I have created an small sencha fiddle demo. Hope this will help you.
//create grid
Ext.define('DemoGrid', {
extend: 'Ext.grid.Panel',
xtype: 'demogrid',
store: {
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'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
flex: 1
});
//controller
Ext.define('DemoCnt', {
extend: 'Ext.app.ViewController',
alias: 'controller.demo',
onButtonClick: function (button) {
var accordion = this.lookupReference('demoAccordion'); //if your Accordion Layout is inside of panel/coantainer then you can use like this {this.lookupReference(your refrence name)}.
this.doGetAllGrid(accordion);
/* var panel = button.up('panel');
panel.down('[reference=demoAccordion]');
panel.down('panel') also we get like this
panel.down('panel[reference=demoAccordion]') also we get like this
*/
},
doGetAllGrid: function (accordion) {
var data = [];
//{accordion.query('grid')} return all grid as Accordion contain
Ext.Array.forEach(accordion.query('grid'), function (item) {
data.push('<b>' + item.title + '</b>');
});
Ext.Msg.alert('Success', 'Your all grid title is below :-<br>' + data.join('<br>'));
}
});
//Accordion Layout panel
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: '100%',
controller: 'demo',
height: 700,
items: [{
xtype: 'panel',
reference: 'demoAccordion',
layout: {
// layout-specific configs go here
type: 'accordion',
animate: false,
fill: false,
hideCollapseTool: false,
collapseFirst: false,
titleCollapse: false,
// multi: true,
overflowHandler: 'scroller'
},
defaults: {
xtype: 'demogrid'
},
items: [{
title: 'Grid 1'
}, {
title: 'Grid 2'
}, {
title: 'Grid 3'
}, {
title: 'Grid 4'
}, {
title: 'Grid 5'
}, {
title: 'Grid 6'
}, {
title: 'Grid 7'
}, {
title: 'Grid 8'
}, {
title: 'Grid 9'
}, {
title: 'Grid 10'
}],
}, {
xtype: 'demogrid',
margin:'10 0',
title: 'Grid 11 will not inside of Accordion Layout '
}],
buttons: [{
text: 'Get All Grid',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: function () {
var panel = this.up('panel');
panel.getController().doGetAllGrid(panel.down('[reference=demoAccordion]')); //Just call only common method of controller to get all grid.
}
}, {
text: 'Get All using controller method with a reference',
height: 50,
padding: '0 35',
style: 'background: transparent;border: 2px solid #737373cc;',
handler: 'onButtonClick'
}],
renderTo: Ext.getBody()
});

How to update a row on a grid from an alert window using ExtJs?

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

get a row from a grid ExtJs 4

I think it's very simple to answer to this question:
I have simple grid with my custom store:
//other code
{
xtype: 'grid',
store: 'SecondStore',
itemId: 'mainTabPanel2',
columns: [
//this is not from the store
{
header: 'Not Form Store',
id: 'keyId2',
},
//from the store
{
header: 'From Store',
dataIndex: 'label',
id: 'keyId',
}
]
}
the store only populate the second column with id: keyId. In fact it have:
fields: [{ name: 'label' }]
And this work well.
I want to get from a function the row n°1 of this grid.
handler: function() {
var grid = Ext.ComponentQuery.query('grid[itemId="mainTabPanel2"]')[0];
//var row= get row(1) <- i don't know how to get the complete row
}
I'm working with ExtJs 4 so i can't get it with the command grid.getView().getRow(1);
I can't get it from the store because i want to get also the content of the column with id:keyId2 that is not stored in the store, so I can't do something like:
grid.getStore().getAt(1);
Anyone know how to get the complete row in ExtJs 4?
Thank you!

You can solve in this ExtJS 4.x using getNode: grid.getView().getNode(index)
getNode can take an HTML ID (not very useful), an index, or a store record.

I think you need something like this:
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'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'
}
}
});
var grid = 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'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
alert(grid.getStore().getAt(1).data.name);
});
jsFiddle: http://jsfiddle.net/RftWF/

Get FireBug plugin and monitor the grid at 'handler'. If you see the data from the column keyId2 than you can see the way in the firebug too. i.e grid object->store object-> data array.
Can you tell us how did you add data in the column keyId2 of the grid ?

I've solved accesing the DOM:
/* Get Dom of the first grid */
var DOMgrid = Ext.select('#'+gridview.getId());
var gridChild = DOMgrid.elements[0].children[1].children[0].children;
Then you should get the "children" you are interested to simply following the DOM structure.
You can also get the singleton flyweight element applying the Ext.fly() comand and update the content with the update() comand:
Ext.fly(/*DOM object here*/).update(/*raw content here*/)

Ext.grid.Panel - how to access row data

I have an Ext.grid.Panel with a listener for dblclick. It looks like this:
listeners: {
dblclick: {
fn : function() {
console.log("double click event processed");
},
element: 'el'
}
}
When a row is double clicked, I would like to open a URL in a new page. In order to determine the URL, I need access to row data - either that, or to the "row" in my JSON that serves as the Panel's store. How would I access this data?

Well, the event is itemdblclick (no dblclick). And the row is passed as an argumento to the handler.
For example, in the follow sample, when you double click on a row you can see an alert pop-up window displaying the selected Simpson name:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ '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: 'Simpsons',
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,
listeners: {
itemdblclick: {
fn : function(grid, record) {
alert(record.get('name'));
}
}
},
renderTo: Ext.getBody()
});​
You also can see it working here: http://jsfiddle.net/lontivero/utjyd/1/
Good luck!