I have a simple grid with one of the columns being a 'download' link placed like this:
{
header: 'Config files',
width: 130,
sortable: false,
fixed: true,
renderer: function() {
return 'Download';
}
}
This is in the view. Now moving on to the controller I placed a listener on the grid to catch whenever the link is clicked:
init : function() {
this.control({
'accountFiles a[class=downloadCfg]': {
click: function () {
alert('test');
}
}
});
}
Very basic but it doesnt work. Can it be because the link is created via the 'renderer' function of the grid? Any ideas?
#Romeo
This is how you can grab whether the Download link is clicked or not:
'accountFiles': {
itemclick: function( thisView, record, item, index, e, eOpts ) {
var t = e.getTarget('.downloadCfg');
if (!Ext.isEmpty(t))
alert('Download clicked!!');
else
alert('Other item clicked!!');
}
}
Once you have identified that the Download link is clicked, you have the record containing the complete record representing the row.
I don't know how to fix this issue, but I know another solution.
Create method in GridPanel:
doDownload: function(recordId) {
var record = this.getStore().data.get(recordId);
// do something
}
Then create change renderer to:
renderer: function(value, meta, record, rowIndex, colIndex, store) {
return 'Download';
}
Action in onclick handler tries to find grid using dom classes.
accountFiles a[class=downloadCfg]
will select all descendant of accountFiles tag which have a tag. And filter them by class attribute.
It seems to me that you confused it with ComponentQuery syntax where you select by component id not by tag.
Related
Hi I have added one context menu on my grid which will perform the enable and disable functionality for selected row. I am new to ExtJs. I have added below listener for the grid. How to add enable and disable functionality for the grid row?
listeners: {
itemcontextmenu: function (grid, record, item, index, e) {
var contextMenu = Ext.create('Ext.menu.Menu', {
controller: 'grid-controller',
width: 165,
plain: true,
items: [{
text: 'Disable',
listeners: {
click: {fn: 'disable', extra: record}
},
}]
});
e.stopEvent();
contextMenu.showAt(e.getXY());
}
}
This is not a copy-paste answer, but going through the following steps with doing your own research you can solve your problem.
1. Create the context menu only once and destroy it
In you code, the context menu is created every time when the user opens up the menu on the grid. This is not good. Instead, create the context menu only once when the grid is created, and destroy it when the grid is destroyed. Something like this:
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
initComponent : function() {
this.callParent();
this.MyMenu = Ext.create('Ext.menu.Menu', {
items: [...]
});
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},
onDestroy : function() {
if (this.MyMenu) {
this.MyMenu.destroy();
}
},
onItemContextMenu : function(view, rec, item,index, event) {
event.stopEvent();
this.MyMenu.showAt(event.getXY());
}
});
2. Store enabled / disabled state in the record
For the next step to work, records in your grid must contain whether the corresponding row is enabled or disabled. In the context menu, when user selects enabled / disabled, store this status like this, get record of the row where the context menu was displayed from:
record.set('myDisabledState', true); // or false
It is important to store the disabled state (and not enabled), because when your grid initially is rendered, these values won't be in the records, so record.get('myDisabledState') will evaluate to FALSE, and that is the desired behaviour, if you want to start with every row being able to be selected.
3. Disable selection
Now you can add a beforeselect listener to your grid, see documentation. This listeners receives record as parameter, and if you return false from this listener, the selection will be canceled. So in this listener simply add:
listeners: {
beforeselect: function ( grid, record, index, eOpts ) {
return !record.get('myDisabledState');
}
}
4. Apply formatting - OPTIONAL
It is likely that you want to add different formatting for disabled rows, for example grey colour. The easiest way to do it is to add a custom CSS style to your Application.scss file:
.my-disabled-row .x-grid-cell-inner {
color: gray;
}
Finally add getRowClass configuration to your grid, it will receive the current record being rendered, and you can return the above custom CSS style when the row is disabled:
Ext.define('MyGrid', {
// your grid definition
,
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if (record.get('myDisabledState')) {
return "my-disabled-row";
}
}
}
});
In this last part, when row is not disabled, it will return nothing, so default formatting will be used.
I'm newbie at Ext JS and I would like to know if it is possible to create a Textfield or a different component and insert it inside a grid panel cell. I have tried this so far (It doesn't return me the component):
{
header : ...,
id : ...,
dataIndex : ...,
sortable : true,
width : 140,
renderer: function(value, meta, record) {
return new Ext.form.TextField({fieldLabel: 'field', text: 'test'});
}
}
I would like to do something similar with cellEditing, but I can't use that plugin because I'm working with a older version of Ext (3.2.1).
My target is to show a textfiled when someone clicks at a specific cell.
Thank you.
https://fiddle.sencha.com/#fiddle/27e7&view/editor
I have returned html input field inside column renderer.
Just like cell editor I have set value to textfield.Also I have added blur event handler method in which you can write code similar to cell editor's edit listener.
Is this what you want? Or some other changes.Check it.
Adding code here:
renderer: function (value, meta, record) {
return "<input onblur='onBlurEventHandler(event)' value="+value+" style='width: 90 px;'></input>"
}
function onBlurEventHandler(event){
console.log('Value: '+event.currentTarget.value);
}
More or less the configuration looks like this:
{
xtype: 'widgetcolumn',
//text: "", //localize
dataIndex: "carStatusButton",
//disable action for the column
sortable: false,
filter: false,
menuDisabled: true,
widget: {
xtype: 'changeavailbutton',
//reference: "gridCarStatusButton", we cannot use reference because we get a duplicate reference warning
//text is being automatically generated from dataIndex of widgetcolumn
/*
//didn't work!
defaultBindProperty: "curCarStatus", //default is text
curCarStatus: "aaaaaaaa",
setCurCarStatus: function (value) {
this.curCarStatus = value;
},*/
/*
getCurCarStatus: function () {
return "aaaaaa"
},
setCurCarStatus: function (value) {
},*/
/*text: (function() {
return this.enableToggle;
})(),
bind: {
},*/
},
}
We have considered using the updater(cell, value, record, view) but it does not get called initially
We have considered using the renderer(value, metadata, record) but we can only affect the value, it does not give us any help with the widget
We considered to use a custom defaultBindProperty in the widget like this:
defaultBindProperty: "curCarStatus", //default is text
curCarStatus: "",
setCurCarStatus: function (value) {
this.curCarStatus = value;
}
The above helped to avoid creating an extra field in the model that would be necessary. In other words initially we had a field in the model, as a transient field to get the calculated value inside the dataIndex of the widgetcolumn but didn't bring any help on what we were trying to achieve.
The fact is that (from documentation) widgetcolumn binds the dataIndex to the defaultBindProperty of the widget. One problem is that there is a bind that happens in the background that we are not aware of its key value. It would look like that if it was a configuration:
bind: {
text: "{unknownProperty}"
}
If we knew how the property was called it could be helpful to use it in various properties because in our situation we need to bind more than one properties to the widget.
We are actually looking similar functionality provided by isDisabled provides to an ActionColumn to have it in a WidgetColumn.
In the widgetcolumn itself:
onWidgetAttach: function (column, widget) {
if (widget.getWidgetRecord().get('property')) {
widget.setDisabled(false)
} else {
widget.setDisabled(true)
}
}
And the grid can be updated with grid.getView().refresh() to reflect any changes
I am trying to create a grid using extjs 4.2.2. The grid contains several rows, if I click one row, then pops up another page which displays the detail info of that row.
The grid is in a panel, so the view code is:
Ext.define("Application.view.foo.Panel", {
extend: "Ext.panel.Panel",
cls: 'foo.panel'
...
items: [
{
itemId: "foo-bar",
xtype: "grid",
...
,selType: 'checkboxmodel'
,columns: [
xtype: 'templatecolumn'
and the code of listening row select event in controller is like:
"panel[cls~=foo.panel] #foo-bar": {
select: function(selectionModel, record, index) { .... }
Now, I am going to add check box for each row in order to mass edit, I added selType: 'checkboxmodel', but the problem is that I cannot click the check box: if I click the box, it goes the the detail page, not just being 'checked', cuz the code in controller listens that 'row click' event.
Is there any suggestions to implement it? Thanks in advance.
I would suggest to change your row click listener to view row details with action column.
{
xtype:'actioncolumn',
width:50,
items: [{
// Url is just for example (not working)
icon: 'extjs/examples/shared/icons/fam/showDetails.png', // Use a URL in the icon config
tooltip: 'Show details',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
// do your functionality here...
}
}
In every row will appear an icon, and then you will have possibility to multiselect rows and to look details of every row as well. Hope that helps.
Try to listen on cellclick event instead.
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
if(cellIndex != your_checkbox_column) {
//do your info page stuff here
}
}
I need to add a click event on a link inside the grid, how's that working?
This is my grid:
Ext.define('AM.view.advertiser.List', {
extend:'Ext.grid.Panel',
alias:'widget.advertiserlist',
title:'All Advertisers',
store:'Advertisers',
columns: [
{
xtype:'gridcolumn',
dataIndex:'clientname',
text:'Clientname',
width: 200,
renderer: function(val) {
return ''+ val +'';
}
}]
});
Here is how I hacked the same exact situation, but I wanted controller to respond to the click events and I needed to extract info after the hashmark:
'myView gridpanel[ref=myGrid]':{
itemclick : function(view, model, row, rowindex, event) {
var hash = event.getTarget().hash;
if (!hash && event.getTarget().parentNode) {
hash = event.getTarget().parentNode.hash
}
if(hash) {
console.log("Control: "+hash);
//do something with the hash -> #{mydata}
}
}
}
xtype:'gridcolumn',
dataIndex:'clientname',
text:'Clientname',
width: 200,
autoEl:{
tag: 'a',
href: '',
onClick: 'nameYouFunction',
//Any methods to add here
}
You can use the following event:
http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.grid.Panel-event-cellclick
And after that, you can use parameters of the event to make it work as you want