How do I databind my extjs6 grid to include "commission" using the following format I created from webapi ef?
grid columns should look like this.
title: 'Commissions',
xtype: 'grid',
bind: {
store: '{myAccountDetails.commission}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '0 0 0 0',
itemId: 'gridCommId',
collapsible: true,
columns: [
{
header: 'USD',
dataIndex: 'usd',
flex: 1
},
{
header: 'AUD',
dataIndex: 'aud',
flex: 1
},
{
header: 'CAD',
dataIndex: 'cad',
flex: 1
}
This is my view of grid
the screenshot I attached is myAccountDetails
any help would be greatly appreciated!
just a sidenote... if I add a label I am able to return the info I am looking for but I want it to be inside a grid.
xtype: 'label',
cls: 'myLabelCRM2',
bind: {
text: '{myAccountDetails.commission.aud}'
}
Best approach is to define a store in viewmodel, and bind it's data field directly to the details commision field using the mustache syntax.
Ext.define('MyView', {
viewModel: {
data: {
myAccountDetails: {
accountName: 'foo',
commision: {
aud: 7,
cad: 8,
usd: 9
}
}
},
stores: {
commisionStore: {
fields: ['aud', 'cad', 'usd'],
data: '{myAccountDetails.commision}'
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{commisionStore}'
},
columns: [{
header: 'USD',
dataIndex: 'usd',
flex: 1
}, {
header: 'AUD',
dataIndex: 'aud',
flex: 1
}, {
header: 'CAD',
dataIndex: 'cad',
flex: 1
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
Related
I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}
I have MVVM app with openlayers map.
When doing specific event on the map (like finishing a draw) I want to fire "Add" event of extjs grid.
I've tried accessing the viewcontroller using
MyApp.app.getController('itemsController') but I get error :
Unrecognized class name / alias: App.controller.itemsController
How can I call a viewcontroller method or fire event of grid item to starting adding items to the grid ?
Ext.define('App.view.grids.ItemsViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.itemsController',
onNewClick: function (button, evt) {
var newItem = Ext.create('App.model.items.Item', {
id:'',
name:''
});
this.isNewRecord = true;
this.newRecordId = newEvent.get('id');
var grid = this.lookupReference('itemsgrid');
grid.getStore().insert(0, newEvent);
grid.getPlugin('itemsRowEditingPlugin').startEdit(newEvent);
}
});
View definition:
Ext.define('App.view.grids.ItemsGrid', {
extend: 'Ext.panel.Panel',
alias: 'widget.items',
xtype: 'itemsGrid',
reference: 'items',
requires: [
'App.view.grids.ItemsViewController',
'App.view.grids.ItemsViewModel2'
],
viewModel: {
type: 'itemsViewModel'
},
controller: 'itemsController',
session: true,
width: '100%',
height: 500,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'grid',
itemId: 'itemsgrid',
reference: 'itemsgrid',
width: '100%',
title: 'Items',
flex: 5,
height: 350,
maxHeight: 350,
scrollable: 'y',
header: true,
viewConfig: {
stripeRows: true
},
bind:{
store: '{itemsStore}'
},
columns: [
{
dataIndex: 'id',
text: 'id'
//,hidden: true
},
{
dataIndex: 'hours',
text: 'Hours',
editor: {
xtype: 'numberfield',
minValue: 1,
allowBlank: false
}
},
{
dataIndex: 'address',
text: 'Address',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
dataIndex: 'name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
selType: 'rowmodel',
plugins: [
{
ptype: 'rowediting',
pluginId: 'itemsRowEditingPlugin',
clicksToEdit: 1
}
]
}]
});
Try accessing you controller like this:
Ext.ComponentQuery.query('itemsGrid')[0].getController();
I am using ExtJs 4.1 and trying to add items to panel and columns to grid dynamically.
My Requirement
MainPanel (Ext.panel.Panel) has 2 child items:
DynamicPanel (Ext.panel.Panel)
I want to add this panel to the main panel dynamically.
Then... I want to add items to DynamicPanel dynamically, the items are a config of the MainPanel called : "elements"
DynamicGrid (Ext.grid.Panel)
I want to again, add this to the main panel dynamically.
I want to add columns to DynamicGrid dynamically, and again these columns are part of the MainPanel config gridcolumns.
I am getting the below error:
this.dpanel is undefined
[Break On This Error] this.dpanel.add(this.elements)
My code is as below:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'date', 'time'],
data: {
'items': [{
"name": "Lisa",
"email": "[EMAIL="
lisa#simpsons.com "]lisa#simpsons.com[/EMAIL]",
"phone": "555-111-1224",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Bart",
"email": "[EMAIL="
bart#simpsons.com "]bart#simpsons.com[/EMAIL]",
"phone": "555-222-1234",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Homer",
"email": "[EMAIL="
home#simpsons.com "]home#simpsons.com[/EMAIL]",
"phone": "555-222-1244",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Marge",
"email": "[EMAIL="
marge#simpsons.com "]marge#simpsons.com[/EMAIL]",
"phone": "555-222-1254",
"date": "12/21/2012",
"time": "12:22:33"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.define('DynamicGridPanel', {
extends: 'Ext.grid.Panel',
alias: 'widget.dynamicGridPanel',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200
});
Ext.define('DynamicPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicPanel',
title: 'DynamicAdd',
width: 200,
height: 200
});
Ext.define('MainPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicMainPanel',
title: 'MainPanel',
renderTo: Ext.getBody(),
width: 600,
height: 600,
constructor: function (config) {
var me = this;
me.callParent(arguments);
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
}, //eo constructor
onRender: function () {
var me = this;
me.callParent(arguments);
//I am getting error at the below lines saying the dpanel and dynamicGridPanel undefined
me.dpanel.add(this.elements);
me.dynamicGridPanel.columns.add(this.gridcolumns);
}
});
var panel1 = Ext.create('MainPanel', {
gridcolumns: [{
xtype: 'actioncolumn',
width: 42,
dataIndex: 'notes',
processEvent: function () {
return false;
}
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'gridcolumn',
header: 'Date',
dataIndex: 'date',
flex: 1,
editor: {
xtype: 'datetextfield',
allowBlank: false
}
}, {
xtype: 'gridcolumn',
header: 'Time',
dataIndex: 'time',
flex: 1,
editor: {
xtype: 'timetextfield',
allowBlank: false
}
}],
elements: [{
xtype: 'numberfield',
width: 70,
tabIndex: 1,
fieldLabel: 'Account No',
itemId: 'acctno',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'lastname',
width: 90,
tabIndex: 2,
fieldLabel: 'Last Name',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'firstname',
width: 100,
tabIndex: 3,
fieldLabel: 'First Name',
labelAlign: 'top'
}]
});
Create the child elements in initComponent:
initComponent: function() {
var me = this;
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
me.callParent(arguments);
}
Dont forget to define the require config for columns in your grid:
columns: []
Look at that Example here for adding dynamically columns in grid http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html
I am trying to add Checkboxes for a Rally Report version 2.00p2.
I defined severals place holders for the filter (releaseFilter and stateFilter)
and Adding the checkboxes at the body of the onReady function at the end.
However, Instead of 5 different checkbox I get 1 and on top of the Release filter.
Sorry But I couldn't add an Image.
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
autoScroll: 'true',
items: [
{
xtype: 'container',
itemId: 'releaseFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'stateFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'grid',
style: {
margin: '10px',
}
},
// SOME CODE
],
launch: function() {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Release',
'Iteration',
'PlanEstimate',
'PlanDevEstDays',
'PlanQAEstDays'
],
storeConfig: {
filters: [
{
property: 'ScheduleState',
operator: '=',
value: 'Accepted'
}
]
}
});
this.down('#releaseFilter').add(
{
xtype: 'rallyreleasecombobox'
}
);
this.down('#stateFilter').add([{
xtype: 'menucheckitem',
text: 'Backlog',
floating: 'false'
},{
xtype: 'menucheckitem',
text: 'Defined'
},{
xtype: 'menucheckitem',
text: 'In-Progress'
},{
xtype: 'menucheckitem',
text: 'Completed'
},{
xtype: 'menucheckitem',
text: 'Accepted'
}]
);
},
scope: this
});
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
The original Entry in your javadoc is:
Ext.create('Ext.menu.Menu', {
width: 100,
height: 110,
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
xtype: 'menucheckitem',
text: 'select all'
},{
xtype: 'menucheckitem',
text: 'select specific',
},{
iconCls: 'add16',
text: 'icon item'
},{
text: 'regular item'
}]
});
What did I do wrong ?
Instead of using menucheckitem, use a standard Ext checkbox. Like this:
this.down('#stateFilter').add([{
xtype: 'checkbox',
fieldLabel: 'Backlog'
},
...
]);
Be sure change it from text to fieldLabel
I would like to add a grid to my existing website. I understand that "viewport" takes up the whole page. As i just want part of the page i should "panel".
I've followed this example to setup my grid in a clean mvc style.
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
However this example uses "viewport".
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'tasklist',
title: 'Tasks',
html: 'List of tasks will go here'
}
]
});
}
I've changed this to the following.
launch: function () {
Ext.create('Ext.grid.Panel', {
layout: 'fit',
renderTo: 'panelcontainer', // i've added div to html
width: 1000,
height: 600,
items: [
{
xtype: 'tasklist',
title: 'Tasks',
html: 'List of tasks will go here'
}
]
});
}
here is my tasklist
Ext.define('AM.view.task.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.tasklist',
store: 'Tasks',
title: 'All Tasks',
initComponent: function () {
this.columns = [
{ header: 'Name', dataIndex: 'Name', flex: 1 },
{ header: 'ReferenceNumber', dataIndex: 'ReferenceNumber', flex: 1 },
{ header: 'ProductList', dataIndex: 'ProductList', flex: 1 },
{ header: 'Supplier', dataIndex: 'Supplier', flex: 1 },
{ header: 'ModifiedByUserName', dataIndex: 'ModifiedByUserName', flex: 1 },
{ header: 'Date', dataIndex: 'Date', flex: 1, type: 'date', dateFormat: 'Y-m-d' },
{ header: 'Id', dataIndex: 'Id', flex: 1 }
];
this.callParent(arguments);
}
});
This all works. if i use viewport
Change 'Ext.grid.Panel' to 'Ext.panel.Panel' (in launch and tasklist snippets) and it will work as you expect it to.