I'm using a propertyGrid for building a tabular from. When I use a renderer to return a textfield, I can't click and type in that textfield. It doesn't get any focus. Any way to fix it? Also, is there a way to render an ExtJs element instead of a raw HTML element from a renderer?
In grid,column renderers only return HTML text, so it's not possible to return components directly. The only thing is assign a unique id to the cell and defer the actual component creation.
{
header: 'Row7',
align: 'center',
renderer: renderCmp,
dataIndex: 'cmpname',
width: 100
}
// Renderer function
function renderCmp(value, id, r)
{
var id = Ext.id();
if (r.data.cmpname )
{
createGridButton.defer(10, this, ['One', id, r]);
return('<div id="' + id + '"></div>');
}else
{
createGridButton.defer(10, this, ['Two', id, r]);
return('<div id="' + id + '"></div>');
}
}
function createGridButton(value, id, record) {
new Ext.Button({
text: value,
iconCls: 'my-icon',
handler : function(btn, e) {
alert('Componet in Row');
}
}).render(document.body, id);
}
Hope it helps you..
Related
In grid 'actioncolumn' i displayed an image using 'renderer' like,
image + text
On action column click i am calling some action,
but click event is triggering even click on empty space in grid cell.
how to prevent that click on empty space.
how to identify click on link (image+text), not on grid cell empty space.
{
xtype: 'actioncolumn',
width: '17%',
text: 'Display Option',
renderer: function (value, metadata, record) {
var label = '';
if (record.get('status') == 0) {
lable = 'Show';
etadata.style += 'margin-top:10px;cursor:pointer;';
return '<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'
} else {
metadata.style += 'margin-top:10px;cursor:pointer;';
lable = 'Hide';
return '<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'
}
},
handler:function(grid, rowIndex, columnIndex, e){
console.log('handler test');//not triggering
},
listeners: {
click: function ( grid, rowIndex, colIndex) {
console.log('handler test');// triggering
}
}
Thanks
I'm using ExtJs 4.2.2, and I never had the issue. I define my actioncolumns like this:
{
xtype: 'actioncolumn',
items: [{
tooltip: Lang._('Tooltip for edit'),
handler: function(grid, ri, ci, me, e, rec, rEl) {this.up('grid').fireEvent('editAction', grid, ri, ci, me, e, rec, rEl)},
getClass: function(value, metadata, record){
return '[css class for background image]'
}
},{
...
}],
menuDisabled: true
}
The in the controller I have:
init: function(){
this.control({
'[xtype of grid]': {
editAction: this.onEditAction,
}
})
},
onEditAction: function(grid, rowIndex, colIndex, me, event, record, rowEl){
Ext.Msg.alert('Info', 'edit clicked')
},
Probably you defined the handler for the action column, instead of definig a handler for each item.
You need to use the event parameter passed into the handler, see the docs http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.grid.column.Action-cfg-handler
With the event object you can look at the target and see if its an element you want to process, if it's not you can just return false to prevent anything else happening.
You can override the "Ext.grid.column.Action" class with an overrriden method defaultRenderer.
Inside the items config of the actioncolumn - provide some custom configs like
img: 'image path'
text: 'your text'
and check for the existense of these configs inside the defaultRenderer method and thus return
'<span style="font-size: 14px; color:#3b87de; font-family:arial;">' + '<img src="resources/images/hide_fault.png"/>' + label + '</span>'
or
'<span style="font-size: 14px; color:#3b87de; font-family:arial; margin-left:-3px;">' + '<img src="resources/images/show_msg.png"/>' + label + '</span>'
This way the handler that you define for that item will be invoked only when the image is clicked.
You might have to take care of some css..
Hi i want add component in grid
i try to do this
Rendering a component into an ExtJS grid
but i saw in cell
and button under grid
I use ExtJs 4
columns:[
{header:"test", dataIndex:'registrationDate', width:30, renderer:function (value, id, r) {
var id = Ext.id();
new Ext.Button({
text:"1", handler:function (btn, e) {
// do whatever you want here
}
}).render(document.body, id);
return('<div id="' + id + '"></div>');
}}
],
If you just need the buttons with click handler in the columns use the actioncolumn xtype.
I have an ext js grid like below:
var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})
Now I need to show Account Id column as a column of radio buttons. So from the grid user can select one Account Id and submit. When the user reloads the page, that account id should be preselected.
I need some help on how to proceed on this. Do I need to write a renderer on Account Id column? Or is there an easier way.
EDIT: I did like this:
{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
What is the syntax to add an onclick event or onchange event to the radio group?
Building off the previous answer, yes, I think using a renderer for your column is the correct solution. I think you should go about the click event differently than J. Bruni suggested though. I'd recommend a click listener on your grid panel that checks if you clicked a radio button, and delegates to a method in your GridPanel.
Something like this:
MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
columns: [
{header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
{header: 'Account NUmber',dataIndex:'accountNumber' }
],
afterRender: function() {
MyRadioGrid.superclass.afterRender.apply(this, arguments);
this.el.on('click', this.checkRadioClick, this);
},
checkRadioClick: function(event) {
if (event.getTarget('input[type="radio"]')) {
//radio clicked... do something
}
}
});
You did well on showing Account Id column as a column of radio buttons, by using a renderer function.
Regarding the onclick event for these, you may simply add the onclick attribute in the HTML tag:
return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
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
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.