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.
Related
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()
});
}
});
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 have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that?
my code:
GRID.JS
Ext.create('Ext.grid.Panel', {
xtype:'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
TAB.JS
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
xtype:'grid'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
I have added the xtype:grid in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.
xtype: 'grid' - means create standard Ext.grid.Panel and add it here.
You have two options:
Create your grid and save it into variable.
var _grid = Ext.create('...', {...});
Ext.create('Ext.tab.Panel', {
...
items: [
_grid
]
});
Or, define your own class with new xtype
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
...
});
Ext.create('Ext.tab.Panel', {
...
items: [{
xtype: 'mygrid'
}]
});