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.
Related
How to define custom tooltip for a column in extjs grid? there is a listener for grid which apply QuickTips for whole grid but I want a column has a custom tooltip and ignore global tooltip. here the listener code on grid:
listeners: {
itemmouseenter: function (view, record, item, index, e, options)
{
if (e.getTarget().textContent.length > 11)
Ext.QuickTips.register({
text: e.getTarget().textContent,
trackMouse: true,
target: e.target
});
},
}
I try to add this code to column,but still global one works.
By using renderer of grid column you can show the tooltip. something like
var myRenderer = function(value, metaData, record, rowIndex, colIndex) {
if (colIndex === 0) {
metaData.tdAttr = 'data-qtip=' + value;
}
// additional logic to apply to values in all columns
return value;
}
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Column.html#cfg-renderer
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..
I want a javascript function to be called as I click on a cell in grid .I want code for the same using extjs 3.4. How can I achieve it? can anyone help me out in it?
Set the selection model to CellSelectionModel and call your function on cell select:
var grid = new Ext.grid.GridPanel({
// ..
sm: new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, row, col) {
Ext.Msg.alert('click','got a click!');
}
}
})
})
I'm trying to add a button to the column header drop-down menus in my grid. However, I only want to add it to columns with certain itemId. So far I've got it working to add the button to all columns, see code below. I dont see where I could check each column's itemId though, it doesn't seem to iterate through the columns. Is there any workaround for this? Thank you!
items:[{
region:'center',
xtype:'grid',
columns:{
items: COLUMNS, //defined in index.php
},
store:'Items',
selType: 'checkboxmodel',
listeners: {
afterrender: function() {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'edit',
handler: function() {
console.log("clicked button");
}
}]);
}
}
}],
The grid column menu exists in one instance which is shared for all columns. Because of this you can not add menu item only for one column.
However you can show/hide menu item in this menu for specific column. You can use menu beforeshow event and get information about column from menu.activeHeader property:
listeners: {
afterrender: function(c) {
var menu = c.headerCt.getMenu();
// add menu item into the menu and store its reference
var menuItem = menu.add({
text: 'edit',
handler: function() {
console.log("clicked button");
}
});
// add listener for beforeshow menu event
menu.on('beforeshow', function() {
// get data index of column for which menu will be displayed
var currentDataIndex = menu.activeHeader.dataIndex;
// show/hide menu item in the menu
if (currentDataIndex === 'name') {
menuItem.show();
} else {
menuItem.hide();
}
});
}
}
Fiddle with live example: https://fiddle.sencha.com/#fiddle/3fm
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'" : "") + ">";