Editing a line in an ExtJs grid - extjs

Hello, I'm developing a project using Ext Js that needs to edit a line in a grid. I'm trying to use a plugin I found in Ext's documentation, plugins: [Ext.create ('Ext.grid.plugin.RowEditing')] but when I click on the line, update and cancel options appear on the grid, but the cell is not editable, does anyone know what's going on?
The example in the documentation with the plugin is this: http://docs.sencha.com/ext-js/4-0/#!/example/restful/restful.html
My code so far:
Ext.define('GridEditavel',{
extend : 'Ext.grid.Panel',
title: 'Grid Editavel',
store: 'GridStore',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
xtype: 'button',
text : i18n['vds.botao.nova.coluna'],
icon : Webapp.icon('add1.png'),
iconAlign : 'top',
handler : function() {
var gridView = Ext.ComponentQuery.query("gridpanel")[1];
Ext.Msg.prompt('Message', 'Enter a column number:', function(
btn, text) {
if (btn == 'ok' && text != null) {
var column = Ext.create('Ext.grid.column.Column', {
text : text
});
gridView.headerCt.insert(gridView.columns.length,
column);
gridView.getView().refresh();
} else {
Ext.Msg.alert('Alert', 'Enter a column number!');
}
});
}
} ]
} ],
columns: [{
header : 'Nome',
dataIndex : 'nome',
flex : 0.8
}],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing') ]});

You need to set the editor property in the columns. Example:
columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:'textfield'
}]
You can also use a config object for the editor, like this:
columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:{
xtype:'combo',
store:'somestore'
}
}]

Related

Ext js Grid Pagination

I am new to Ext JS and I have tried the Example from the Ext JS docs, but I am unable to get pagination.
I have designed my application using MVC architecture.
Here is my Code:
title : 'Trade Data',
store : 'RamDataStore',
id:'tradedatagrid',
dockedItems:[{
xtype:'pagingtoolbar',
store:'TradeDataStore',
displayInfo:true,
id:'tradepage',
itemId:'tradepage',
displayMsg:'{0}-{1} of {2}',
emptyMsg:'no topics to show',
dock:'bottom'}
],
columns : [
{
xtype : 'gridcolumn',
width : 85,align : 'center',
dataIndex : 'tradeid',
text : 'TradeId'
},
{
xtype : 'gridcolumn',
width : 120,
dataIndex : 'instrumentType',
text : 'InstrumentType'
},
{
xtype : 'gridcolumn',
width : 103, align : 'center',
dataIndex : 'tradeBook',
text : 'TradingBook'
},
{
xtype : 'gridcolumn',
width : 120, align : 'center',
dataIndex : 'otherBook',
text : 'CustomerBook'
},
]
Here my paging tool bar store and my grid store are the same.
Store:
I defined my store with some default properties and I created an instance for the same store in the controller to dynamically bind.
Ext.define('Myapp.store.RamDataStore', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.ram.RamDataModel'],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'tradedata',
autoLoad: false,
pageSize: 4,
model: 'MyApp.model.ram.RamDataModel',
proxy:{
writer:{
type:'json'
},
reader:{
type:'json'
},
enablePaging: true
},
sorters: [{
property: 'tradeid',
direction: 'ASC'
}]
}, cfg)]);
}
});
Model:
Ext.define('MyApp.model.ram.RamDataModel', {
extend : 'Ext.data.Model',
fields : [{
name:'tradeid',
type:'int'
}, {
name : 'tradeBook',
type : 'string'
}, {
name : 'otherBook',
type : 'string'
}, {
name : 'tradeDate',
type : 'auto'
}, {
name : 'tradedDate',
type : 'auto'
}});
Controller:
I wrote a function that will call on button clicks, and I got a JSON result from the server:
data = [{"tradeid":1,"tradingbook":"ram"},{"tradeid:2,"tradingbook":"testbook"}] //(etc)
Here is my controller code:
var datastore = Ext.create('MyApp.store.RamDataStore',{
model:'Myapp.model.ram.RamDataModel',
data:Ext.decode(result,true),
pageSize:4,
start:0,
limit:4,
enablePaging : true,
proxy:{
type:'memory',
reader:{type:'json'},
writer:{type:'json'},
},
listeners:{
beforeload:function(store,operation,eOpts){
store.proxy.data.total=Ext.decode(result,true).length;
//store.proxy.data=Ext.decode(result,true);
}
},
});
Ext.getCmp('tradedatagrid').getDockedComponent('tradepage').bind(datastore);
Ext.getCmp('tradedatagrid').getView().bindStore(datastore);
Ext.getCmp('tradedatagrid').getView().loadMask.hide();
}
});
With this code, I can add data to my grid, but can't add store to my paging tool bar.
Please help on this. If you have any examples, please suggest & I will follow.
Thanks.
You specify the store for paging toolbar as string what means that Store Manager assumes the string is storeId and tries to find the instance of it. But it cannot because the store is probably created later. Also, the store must be same for both the grid and paging toolbar.
You have two options:
declare the store in your controller: stores:['RamDataStore']
create it manually during grid initComponent where you would also create the paging toolbar and assign the store to it.

Simply placing a toolbar inside of a Panel - Ext JS

I am creating a toolbar in my code below. What I'm wondering is how to place these inside a panel?
var toptoolbar = Ext.create('Ext.toolbar.Toolbar', {
id: 'ttool',
width: '100%',
items: [
{ text : 'MetaCenter',
menu : {
items: [
{ text : 'Wiki' },
{ text : 'JIRA' },
{ text : 'SVN' },
{ text : 'Sharepoint',
menu : {
items: [
{text : 'text 1'},
{text : 'text 2'}
]
}
}]
}
}
]
});
What I want to do is something like:
Ext.create.('Ext.panel.Panel', {
id: 'panel',
tbar: { //code to create the toptoolbar }
....
EDIT:
What I want to have is a very extensive drop down menu with sub menus on a toolbar, I'm trying to avoid putting all of that code to create that toolbar inside of my application. Instead I want to be able to call it from a variable (or better yet, a class?). Kind of like abstraction/encapsulation.
Is this a standard way of component instantiation or are there more-efficient methods?
Cheers!
Check out the ExtJS docs for dockedItems, they give exactly this scenario as an example: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems
You can define the toolbar in the initComponent method of the panel.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 250,
width: 400,
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top'
}
]
});
me.callParent(arguments);
}
});

How to focus on editable textfield when checkbox is checked in ExtJS Grid?

I am creating a grid with checkcolumn and celledit. I have 3 columns 1 is for checkboxes and other is editable text field and 3rd is the productname, using celledit to edit the price.
When I will check a checkbox on a record the focus should be on the textfield for that particular record.
Here is the code sample:
Ext.define('MyApp.view.EntryPage',
{
extend : 'Ext.grid.Panel',
alias : 'widget.entryPage',
title : 'Product Price Entry',
store : 'ProductStore',
loadMask: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],
initComponent:function(){
var me = this;
this.selModel = {xtype:'cellmodel'},
this.columns = {
defaults:{sortable : true,hideable : true,menuDisabled : true,align : 'left',style : 'text-align:left'},
items:[
{
xtype: 'checkcolumn',
header: 'Check Me',
dataIndex : 'active',
listeners:{
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
// Select the textfield
}}
},
{
text : 'Price',
flex:0.75,
sortable : false,
hideable : false,
dataIndex : 'unitprice',
editor: 'textfield'
},
{
text : 'Product Name',
flex:2,
dataIndex : 'pname'
}
]};
//this.features = [];
this.callParent(arguments);
}
});
With the help of listener(use edit event), if it has been checked, get the reference of record and apply focus() method.
Refer below link for reference.
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.plugin.CellEditing-event-edit
see the edit event in the above link.
Thanks
I solved this as follows:
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
//me.getPlugin('cellplugin').startEdit(record,1);
me.getPlugin('cellplugin').startEditByPosition({row: rowIndex, column: 1});
}}
This worked.... Hariharan thanks for your answer!!

How to edit a record that has another object as an attribute

I am developing an application using ExtJs, one of the features is to edit a record already saved. There is a grid where I select the line that I want to edit, and a panel appears with the information to be edited. But one of the attributes that can be edited is another object of my system, called a configuration, and this configuration has an id, which is loaded when you edit the registry. The problem is that when I click on the icon of the grid that lets you edit, the first time the id is retrieved, the second the id does not appear anymore, and the third time displays the following error:'
Uncaught TypeError: Cannot read property 'id' of undefined Grid.js:36
Ext.define.columns.items.handler Grid.js:36
Ext.define.processEvent
Ext.define.processEvent Table.js:755
fire ext-debug.js:8583
Ext.define.continueFireEvent Observable.js:352
Ext.define.fireEvent Observable.js:323
Ext.override.fireEvent EventBus.js:22
Ext.define.processItemEvent Table.js:844
Ext.define.processUIEvent View.js:475
Ext.define.handleEvent View.js:404
(anonymous function)
Ext.apply.createListenerWrap.wrap
My code is (when I click edit icon):
icon : Webapp.icon('editar.png'),
tooltip : 'Editar',
handler: function(view, rowIndex, colIndex, item, e) {
var record = Ext.getStore('EstacaoStore').getAt(rowIndex);
var form = Ext.create('PanelNovaEstacao');
record.set('modoIgnorar', record.data.modoIgnorar);
record.set('latitude', record.data.latitude);
record.set('longitude', record.data.longitude);
record.set('reiniciar', record.data.reiniciar);
record.set('configuracaoCombo', record.data.configuracao.id);
record.set('ativar', record.data.ativar);
record.set('tipoColetor', record.data.tipoColetor);
form.loadRecord(record);
Ext.create('Ext.window.Window', {
title : 'Cadastro',
layout : 'fit',
modal : true,
width : 500,
height : 350,
items : [ form ]
}).show();
And 'PanelNovaEstacao' code is:
Ext.define('PanelNovaEstacao', {
extend : 'Ext.form.Panel',
title : 'Painel',
initComponent : function() {
var combo = Ext.create('ComboBoxConfiguration', {
name : 'configuracao'
});
Ext.apply(this, {
bodyPadding : '10 0 0 10',
items : [ {
xtype : 'hiddenfield',
name : 'id'
}, {
xtype : 'hiddenfield',
name : 'numeroSerieAntigo'
}, {
xtype : 'numberfield',
fieldLabel : 'Número de série',
name : 'numeroSerie',
minValue : 0,
allowBlank : false
}, combo
{
xtype: 'numberfield',
fieldLabel: 'Latitude',
name: 'latitude'
}, {
xtype: 'numberfield',
fieldLabel: 'Longitude',
name: 'longitude'
},{
xtype: 'radiogroup',
fieldLabel : 'Estado',
items : [ {
boxLabel : 'Ativo',
inputValue : true,
checked: true,
name : 'ativar'
}, {
boxLabel : 'Inativo',
inputValue : false,
name : 'ativar'
} ]
}, {
xtype : 'checkbox',
fieldLabel : 'Modo ignorar',
name : 'modoIgnorar'
}, {
xtype : 'checkbox',
fieldLabel : 'Reiniciar',
name : 'reiniciar'
}, {
xtype : 'button',
text : 'Salvar',
textAlign : 'center',
action : 'salvar'
} ]
});
this.callParent(arguments);
}
});
ComBoxConfiguration code:
Ext.define('ComboBoxConfiguration', {
extend : 'Ext.form.ComboBox',
store : 'ConfiguracaoStore',
fieldLabel : 'Configurações',
displayField : 'id'
});
Anyone know what might be happening ??
Thanks!
This line is likely causing the issue: record.set('configuracaoCombo', record.data.configuracao.id);
The data that is coming back from the proxy does not have a configuracao property, so accessing it evaluates to undefined, at which point trying to access the sub-property id will lead to the error you are seeing.
Take a look at the data in the EstacaoStore and what's being returned by the store's proxy (or however you load it). You'll likely find a problem there.
When I click in line and run the code:
var record = Ext.getStore('EstacaoStore').getAt(rowIndex);
console.log(record);
The object that return is: (configuracao is synonymous to configuracaoEstacao)

using same item in multiple tab in extjs

how to reuse the same item in multiple tab so that when that item change, other tab will reflect the changes
i try this code but the label in first tab not shown:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}]
}]
});
});
i'm sorry, what i mean is to use the label globally(like global variable) so that the same instance of label can be displayed and changed from every tab
you can define your label component:
Ext.define('MyLabel', {
extend: 'Ext.form.Label',
alias: 'widget.mylabel',
text : 'mylabel'
});
the alias property is an alias for the class name (in this case MyLabel) and that is why you can use "mylabel" as an xtype
in this way you can reuse the component, like this
var panel = Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype: 'mylabel',
itemId: 'item1'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item2').setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [{
xtype: 'mylabel',
itemId: 'item2'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item1').setText('changed from tab2');
}
}]
});
You can't do exactly what you want here. You see, when you create a label, it has underlying DOM, and naturally that DOM can only exist in one place (so it can't show the same thing on both tabs).
If there is a component that you are wanting to show on both tabs, it seems like it is "higher up" from a data hierarchical perspective. Perhaps it belongs outside the tab panel?
If the label truly belongs in both tabs and should be "the same", you are either going to need to fake it or manually move it between the tabs.
Option 1: Fake It
You can get the most code reuse here by creating a custom Label class, like laurac posted. You still need to keep the label text in sync, so you are going to need to update one when the other's text is changed:
var label1 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
var label2 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label1, {
xtype : 'button',
handler : function() {
label1.setText('changed from tab1');
label2.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label2, {
xtype : 'button',
handler : function() {
labe2.setText('changed from tab2');
labe1.setText('changed from tab2');
}
}]
}]
});
});
Clearly that doesn't feel to "clean".
Option 2: Manual Control
This might be hacky, but slightly less hacky than option 1. Basic idea is to move the label between to two tabs when they are activated:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}, {
title : 'tab2',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}]
});
});
Note: I haven't started using Ext4 yet, so some of the code I added might need to be changed for Ext4 (I think maybe doLayout went away?).
Anyway, those are the only two ways I can think of to solve your problem.
Good luck!

Resources