Create two grids in seperated panels - Ext JS - javascript

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

Related

ExtJS Modern - Add multiple buttons to grid cell

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

Extjs Function Not Found Issue

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

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

ExtJS 4.0.7 fieldcontainer vbox layout

I am trying to make one form in "extjs" in which i want to use "vbox layout" so that i can place textfield and a button in the same line but unable to do that please help me as early as possible please ???
This is the following code which i am using to create a form:
[{ formitems :{[xtype:'dsqfieldcontainer'
layout: {
type: 'vbox'
},
items:[{mapping:'ChannelURL',
name:'ChannelURL',
fieldLabel:'Channel URL',
xtype:'dsqtextfield'
},
{mapping:'Look_Up_ChannelID',
name:'Look_Up_ChannelID',
fieldLabel:'Look_Up_ChannelID',
xtype:dsqbutton
}
]
] },
{
mapping:'CHANNELNAME',
name:'CHANNELNAME',
fieldLabel:'Channel Name',
xtype:'dsqtextfield'
},
{
mapping:'CHANNELID',
name:'CHANNELID',
fieldLabel:'Channel ID',
xtype:'dsqtextfield'
},
{
mapping:'REFRESHTOKEN',
name:'REFRESHTOKEN',
fieldLabel:'Refresh Token',
xtype:'dsqtextfield'
}
}]
Just check below code and you will get your mistake. In my code, textbox and button are showing in one line by hbox layout. Just check it and let me know if you get any issue. My fiddler account is not working. That's why i can't give you link.
My example -
Ext.create('Ext.window.Window', {
height: 400,
width: 400,
items: [
{
xtype:'fieldcontainer',
layout: {
type: 'hbox'
},
items:[{
mapping:'ChannelURL',
name:'ChannelURL',
fieldLabel:'Channel URL',
xtype:'textfield'
},
{
mapping:'Look_Up_ChannelID',
name:'Look_Up_ChannelID',
xtype:'button',
text: 'Button Name'
}]
}]
}).show();
Changes in your example -
items:[
{
xtype: 'fieldcontainer',
layout: {
type: 'hbox'
},
items: [{
mapping: 'ChannelURL',
name: 'ChannelURL',
fieldLabel: 'Channel URL',
xtype: 'textfield'
}, {
mapping: 'Look_Up_ChannelID',
name: 'Look_Up_ChannelID',
xtype: 'button',
text: 'Button Name'
}]
},
{
mapping: 'CHANNELNAME',
name: 'CHANNELNAME',
fieldLabel: 'Channel Name',
xtype: 'textfield'
}, {
mapping: 'CHANNELID',
name: 'CHANNELID',
fieldLabel: 'Channel ID',
xtype: 'textfield'
}, {
mapping: 'REFRESHTOKEN',
name: 'REFRESHTOKEN',
fieldLabel: 'Refresh Token',
xtype: 'textfield'
}
]
Try with:
layout: {
type: 'table'
}

Grouping values in grid panel after double clicking

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/

Categories

Resources