I'm trying to developp an Ext.grid.Panel using EXT JS.
My need is to have a column where the content is a button.
obviously some think like this will not work
this.columns = [
{
text : 'column1',
width : 120,
sortable : true,
flex: 1,
dataIndex: 'col1'
},{
xtype: 'button',
width : 120
}
//...
Also, I've tied some examples like this one but did not work for me.
Any leeds ?
Thanks in advance
Try using an actioncolumn (Extjs docs) like that:
{
xtype: 'actioncolumn',
width: 50,
items: [{
handler: function(grid) {
alert("works");
}
}]
}
Related
I have an ExtJS 6.2 modern app. What is the proper way to add a button to a grid cell?
I tried using the column renderer fn to return a button but I just see the HTML tags rendered, not the actual element. I also tried using the "widgetcell" component which does render the button but not the button text.
Fiddle.
Using your fiddle as an example, you can make a widget button like this
columns: [
//other columns
{
dataIndex: 'description',
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "button",
}
}
}
]
You can do it without widgetcell by:
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: 'button',
text: 'CLICK ME'
}
}
Or with panel
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: 'panel',
header: false,
items: [{
xtype: 'button',
text: 'CLICK ME'
}]
}
}
}
I wanted to accomplish the same task but thought I would include a little more complete example. This was the first resource I came across so figured I should post here.
So for my problem I just wanted to pass the data and render a view utilizing that data.To do that I add a column to my grid and added a widgetcell inside that column. The grid column requires a dataIndex but my button wasn't associated with a specific column in my model, so I just added a non-existent column for the required value which worked.
After that you can specify a widget object as a cell config. You can add a handler key and access the record object from the grid like below.
{
xtype: 'gridcolumn',
flex: 1,
width: 80,
dataIndex: 'button',
text: 'Details',
cell: {
xtype: 'widgetcell',
widget: {
xtype: 'button',
text: 'View',
width: '100%',
handler: function(button,e){
let accountData = this.up().up()._record.data
console.log(accountData);}
}
}
}
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
i define a treeGrid with plugin CellEditing like
Ext.define('MyExample', {
extend: 'Ext.tree.Panel',
id: 'example',
alias: 'example',
....
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
alert('don't run second time');
}
}
})
],
...
And i have a button when i click this button will call below window (this window has treeGrid above)
Ext.create('Ext.window.Window', {
title: 'Phân xử lý',
modal:true,
height: 500
width: 500
layout: 'border',
...
item[
{
title: 'example',
region: 'center',
xtype: 'example', // that here
layout: 'fit'
}
]
Everything working at first time but when i close the window at first time and click button to call window again then CellEditting still working but listeners not working ?
How to fix that thanks
EDIT
Please see my example code in http://jsfiddle.net/E6Uss/
In first time when i click button. Everything working well like
But when i close Example window and open it again I try click to blocked cell again i get a bug like
How to fix this bug? thanks
The problem here is that you are using Ext.create inside the plugins array for the tree grid. This have the effect of creating it once and attaching the result adhoc to your defined class.
If you close the window, all the resources within the window are destroyed. The second time you instantiate the tree panel, the plugin is not there. Take a look at this fiddle : I see what your issue is. Take a look at http://jsfiddle.net/jdflores/E6Uss/1/
{
ptype : 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(plugin, edit){
console.log('EDITOR');
if (edit.record.get('block')) {
alert('this cell have been blocked');
return false;
}
}
}
}
You're recreating the window on every click of the button. This recreation may be messing with your configuration objects or destroying associations or references within them, or something similar. Try to reuse the window everytime by replacing your button code with something like:
Ext.create('Ext.Button', {
text: 'Click me',
visible: false,
renderTo: Ext.getBody(),
handler: function(button) {
if(!button.myWindow)
{
button.myWindow = Ext.create('Ext.window.Window', {
title: 'Example',
height : 300,
width : 500,
layout: 'border',
closeAction: 'hide',
items: [{
region: 'center',
floatable:false,
layout:'fit',
xtype: 'example',
margins:'1 1 1 1'
}
]
});
}
button.myWindow.show();
}
});
Maybe it needed complete the editing cell, try finish it:
...
beforeedit: function(plugin, edit){
alert('don't run second time');
plugin.completeEdit();
}
Sencha: CompleteEdit
I put together a working example here: http://jsfiddle.net/jdflores/6vJZf/1/
I think the problem with your column is that it's dataIndex is expecting that the editor value be a boolean type (because 'block' was set as datIndex instead of 'date'). I assume you are using the 'block' field just to identify which are blocked to be edited. I modified the fidle provided here: http://jsfiddle.net/jdflores/6vJZf/1/
{
text: 'Block Date',
dataIndex: 'date',
xtype: 'datecolumn',
format: 'd/m/Y',
editor: {
xtype: 'datefield',
allowBlank: true,
format: 'd/m/Y'
}
}
Can we add combo box in grid header in extjs ?
we have a special requirement here, if anybody has idea then please let me know.
Thanks
Deepak
If you want it in the grid column header (for example to implement custom filters), look at http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid
Basically, you configure items in the column configuration and off you go:
Ext.define('KitchenSink.view.grid.BigData', {
extend: 'Ext.grid.Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'status',
text: 'Item status'
items: [
{xtype: 'combobox'}
]
}
]
});
You can use extjs tbar to implement components to grid header:
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
or:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
to implement combobox, best way is to define custom combobox component and provide alias for it, then in your grid tbar just say xtype: 'mygridcombo'
Here is a example.
This works for me well
{
text : 'Save Energy Mode',
dataIndex: 'fs',
items: [{
xtype: 'combobox',
padding: 2,
flex: 1
}]
}
or simply (if you do not need title text)
columns: { items: [{ xtype: 'combobox'}] }
If you can have it in the grid panel's toolbar, then Davor's suggestion is the way to go. If you actually need it in the grid's header (e.g., like for filtering on columns), you might check out the Grid Filtering example in the Ext JS docs: http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html
In extjs, if I have a grid definition like this:
xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'ID',
dataIndex: 'someID',
sortable: true,
width: 100
}
Is there a way to apply some formatting to this column? For example, this field is a number and if i wish to set a decimal precision..can I do it? Or do I need to apply formatting when the store is being loaded in my java file?
My guess is the latter??
Use "renderer" option. You can define you function there. For example i want to show someID wrapped in some tag:
columns: [
{
xtype: 'gridcolumn',
header: 'ID',
dataIndex: 'someID',
sortable: true,
width: 100,
renderer: function(value) {
// your logic here
return "<b>" + value + "</b>";
}
}
If you want to show decimal precision inside a grid column you should define the dataindex in your store of "float" type:
...
, {name: 'column_data_name', type: 'float'}
...
Then inside the grid column definition you should specify a renderer, as suggested by KomarSerjio, and use it.
function floatRenderer(value) {
if (value) {
var val = value.toFixed(2);
return addSeparatorsNF(val, '.', ',', '.');
}
else return "";
}
...
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer , align: 'right' }
...
The function addSeparatorsNF has been suggested here.
For formatting your grid decimal value to restrict after point to two number or till you want simply use below code to your column :
renderer: Ext.util.Format.numberRenderer('00.00')
I tried the renderer config KomarSerjio suggested and it worked brilliantly for me when using Sencha Ext JS 6. I used it to zero fill some time data I was receiving which was missing the prefix zero to make it a 24 hour time. So I tried the following and it worked great! Thank you.
Ext.define('ViewLL.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
reference: 'mainList',
flex: 1,
requires: [
'ViewLL.store.Datastore'
],
title: 'Records',
store: {
type: 'datastore'
},
columns:
{ text:'Pln On Site Time',
dataIndex:'plnOnSiteTime',
renderer: function (number) {
if (number<=2400) { number = ("000"+number).slice(-4); }
return number;
}
}
});
Prior to renderer config my grid was displaying values e.g. 926, 800, 1000.
Post adding function via renderer config my grid displayed values e.g. 0926, 0800, 1000