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'
}]
});
Related
Binding checkbox selectionmodel in initComponent is not working as expected in grid component of extjs
What could be the problem in the code? attaching fiddle
https://fiddle.sencha.com/#view/editor&fiddle/2g8r
In order to bind a checkbox in grid, there is a built in plugin.How ever ,if you need to attach the selModel ONLY in the initComponent.Then define grid,attach selmodel and create instance of it. .Here is the updated fiddle https://fiddle.sencha.com/#view/editor&fiddle/2ghc
Ext.define('OuterGrid', {
extend: 'Ext.grid.Panel',
store: userStore,
storeId: 'mystore',
width: 400,
height: 500,
title: 'Sample Application',
columns: [{
text: 'Name',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: 'Email Address',
dataIndex: 'email',
width: 150,
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 1,
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
});
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('OuterGrid', {
renderTo: Ext.getBody(),
});
}
});
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();
So I have a grid with two columns, the first has just text, the second needs to have a custom control (with a checkbox and a combo box)
Check the screenie:
Here is a link to a screenie:
The Problem:
When I click update to update the row. The first column gets updated, but the second column doesn't
I naively added a getValue() into my custom control but no luck!! (Note: I'm using row editing plugin)
Here is my code:
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
//defs for all the toolbars and buttons
plugins: [rowEditing],
columns: [
{
xtype: 'rownumberer'
},
{
xtype: 'gridcolumn',
text: 'Column Titles',
dataIndex: 'ColumnTitle',
editor: {
xtype: 'textfield',
}
},
{
xtype: 'gridcolumn',
sortable: false,
align: 'center',
dataIndex: 'IssueCondition',
editor: {
xtype: 'reportpopulation'
}]
});
The reportpopulation is the custom control here. Here is the code for it:
Ext.define('SelectPopulation', {
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: {
type: 'hbox'
},
initComponent: function () {
//code to add combo box and checkbox snipped
....
},
getValue: function () {
//This doesn't work!
return "Booo";
}
});
So clicking Update doesn't :
Is there something I'm missing?
Should I inherit from FieldBase? Can I use multiple controls and create something like the screenie with FieldBase?
This works, even your getValue() was working, the problem is that you used a custom type value on that grid column (IssueCondition) and did not specified any renderer for it, try something like this:
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
height: 300,
plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})],
columns: [{
xtype: 'rownumberer'
}, {
xtype: 'gridcolumn',
text: 'Column Titles',
dataIndex: 'ColumnTitle',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
sortable: false,
text: "Issue Condition",
align: 'center',
dataIndex: 'IssueCondition',
width: 200,
editor: {
xtype: 'reportpopulation'
},
renderer: function (v, attr, rec) {
console.info(arguments);
return 'cb: ' + rec.data.IssueCondition.cb + ' combo: ' + rec.data.IssueCondition.combo;
}
}],
store: Ext.create("Ext.data.Store", {
fields: ["ColumnTitle", "IssueCondition"],
proxy: {
type: "memory",
reader: {
type: "json"
}
}
})
});
Ext.define('SelectPopulation', {
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: {
type: 'hbox'
},
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: "checkbox"
}, {
xtype: "combobox",
allowBlank: false,
store: [
[0, 'Zero'],
[1, 'One'],
[2, 'Two']
]
}]
});
this.callParent(arguments);
},
getValue: function () {
return {
cb: this.child('checkbox').getValue(),
combo: this.child('combobox').getValue()
};
}
});
Be aware that this is just an example.
Check the Fiddle here
Hope this helps.
I have an actioncolumn in a grid. I used to open a window after i clicked on this but now do we want to open a new tab in the tabpanel instead of the windows. This is the tab i want to generate when someone clicks on the actionpanel:
Ext.define('MyApp.view.MyTabPanel2', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel2',
closable: true,
title: 'Report {name}',
activeTab: 1,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'textfield',
fieldLabel: 'Reference',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Open report'
},
{
xtype: 'button',
text: 'Save report'
},
{
xtype: 'button',
text: 'Export report'
},
{
xtype: 'button',
text: 'Refresh data'
}
]
}
],
items: [
{
xtype: 'gridpanel',
title: 'Grid',
forceFit: true,
store: 'resultStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ccuDesignation',
text: 'CCU Designation'
},
{
xtype: 'gridcolumn',
dataIndex: 'carrierName',
text: 'Carrier Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'dataPackageName',
text: 'Data package name'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesRx',
text: 'bytesRX'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesTx',
text: 'bytesTX'
}
],
viewConfig: {
}
},
{
xtype: 'panel',
title: 'Chart',
dockedItems: [
{
xtype: 'chart',
height: 250,
animate: true,
insetPadding: 20,
store: 'resultStore',
dock: 'top',
axes: [
{
type: 'Category',
fields: [
'ccuDesignation'
],
position: 'bottom',
title: 'CCU Designation'
},
{
type: 'Numeric',
fields: [
'bytesTx'
],
position: 'left',
title: 'Bytes'
},
{
type: 'Numeric',
fields: [
'bytesRx'
],
position: 'left',
title: 'Bytes'
}
],
series: [
{
type: 'line',
xField: 'x',
yField: [
'bytesTx'
],
smooth: 3
},
{
type: 'line',
xField: 'x',
yField: [
'bytesRx'
],
smooth: 3
}
],
legend: {
}
}
]
}
]
});
me.callParent(arguments);
}
});
i have read this at sencha:
// tab generation code
var index = 0;
while(index < 3){
addTab(index % 2);
}
function addTab (closable) {
++index;
tabs.add({
title: 'New Tab ' + index,
iconCls: 'tabs',
html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
closable: !!closable
}).show();
}
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Closable Tab',
handler: function () {
addTab(true);
},
iconCls:'new-tab'
});
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Unclosable Tab',
handler: function () {
addTab(false);
},
iconCls:'new-tab',
style: 'margin-left: 8px;'
});
But i don't have the var tabs in my script. So how can i add the tab to this:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
id: 'tabs',
activeTab: 1,
region: 'center',
items: [
{
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'queryFields',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
addTab;
alert('clicked');
},
altText: 'Open report',
icon: 'img/report-arrow.png',
tooltip: 'Open report'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, options) {
Ext.create('MyApp.view.addReport').show();
}
});
var tabs = Ext.getCmp('tabs');
function addTab (closable) {
alert('yes');
tabs.add(Ext.create('MyApp.view.MyTabPanel2'));
}
How can i do this? I work with extjs designer 2
In that first view you've shown above, you are creating another tabpanel not an individual tab. If you tried to insert that into the tabpanel that you defined in your viewport you would have a tabpanel inside of another tabpanel. I don't think that is what you are trying to do.
You could create that first view above as an Ext.tab.Tab which contains the gridpanel or just create it as the gridpanel itself and include the tab config options in your add method call. To answer your question about referencing the tabpanel when you don't have it defined as a variable: you should just give it an id config (e.g. id: 'tabs') and then you can use Ext.getCmp('tabs'). For example:
// a piece of your viewport config
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
id: 'tabs', // <-- include this config
// other configs...
Adding the tab could then be done like this:
// get a reference to the tab panel
var tabs = Ext.getCmp('tabs');
// if you create the view as a gridpanel you could do it like this
tabs.add({
title: sometitle,
iconCls: someicon,
closable: yayOrNay,
items: [Ext.create('MyApp.view.MyGridPanel')]
});
// OR if you create the view as an Ext.tab.Tab which already contains the gridpanel
tabs.add(Ext.create('MyApp.view.MyTab'));
Read And Use Following Code:
function allExpenseTypeReport(){
var reportByExpenseType=Ext.getCmp("reportByExpenseType");
if(reportByExpenseType==null){
reportByExpenseType = new Ext.tm.reports.ExpenseTypeReport({
title:WtfGlobal.getLocaleText("ec.reportbyexpensetype"),
layout:'fit' ,
closable: true,
iconCls:'pwnd tabreportsWrap',
id:"reportByExpenseType"
});
Ext.getCmp('as').add(reportByExpenseType);
}
Ext.getCmp("as").setActiveTab(Wtf.getCmp("reportByExpenseType"));
reportByExpenseType.doLayout();
}
Define Here:
Ext.tm.reports.ExpenseTypeReport = function(config){
Ext.apply(this, config);
Ext.tm.reports.ExpenseTypeReport.superclass.constructor.call(this, config);
Define your Code Here:
};
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.