I have a widgetcolumn that contains a button:
xtype:'widgetcolumn',
dataIndex: 'canUpdateKey',
itemId:'updateKey',
width:120,
widget: {
xtype: 'button',
text: 'Update key',
hidden: '{!record.canUpdateKey}'
}
I only want to display the button where canUpdateKey is true on the record; but this does not work as indented. Relevant fiddle
From the widget config documentation:
The rendered component has a Ext.app.ViewModel injected which inherits
from any ViewModel that the grid is using, and contains two extra
properties: record and recordIndex
The widget configuration may contain a cfg-bind config which uses the
ViewModel's data.
So you should use bind instead, like this:
xtype:'widgetcolumn',
dataIndex: 'canUpdateKey',
itemId:'updateKey',
width:120,
widget: {
xtype: 'button',
text: 'Update key',
bind: {
hidden: '{!record.canUpdateKey}'
}
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26ig
Inside your button widget, Try this:
listeners:{
render:function(btn){
if(!btn.getWidgetRecord().data.canUpdateKey)
btn.hide();
}
}
Related
Is it possible to make the button's aria-label text dynamic in ExtJS? For example, I want the button's aria-label to be dynamically changing depending on the application's context.
Ext.create('Ext.panel.Panel', {
title: 'test title',
viewModel: {
data: {
firstname: undefined
}
},
items: [
{
xtype: 'textField',
fieldLabel: 'firstname'
},
{
xtype: 'button',
ariaLabel: 'open modal',// make this text dynamic
text: 'SignIn',
bind: {
text: '{firstname}'
}
}
],
});
You cannot bind aria-label or set it after rendering time.
Read ariaAttributes which says
Note that this config is only meaningful at the Component rendering time, and setting it after that will do nothing.
You can only re-set them by recreating the component.
In an Ext.grid.panel I load a list of contents as rows with several columns. I would like the user to be able to select only one of these rows via a checkbox/radiogroup column, which has the ID of the respective entry as value.
I have already discovered the radiobuttons via the xtype widgtecolumn. But how can I set this column so that only one radiobutton in this column can be activated?
The current code for the radio column is the following:
{
xtype: 'widgetcolumn',
bind: {
text: 'Select topic'
},
dataIndex: 'defaultTopic',
widget: {
xtype: 'radio',
simpleValue: true
}
}
To ensure that the user can select only one radiobutton, you have to add the name property to your radio widget.
If you were using radiogroups like in this example, you'd have to add the name to each radiobutton. But for your use case, this configuration would be sufficient:
widget: {
xtype: 'radio',
simpleValue: true,
name: 'test'
}
See also this fiddle for an example.
You can use checkcolumn and change the records values that controls the check value using checkchange listener
Example:
{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active',
listeners: {
checkchange: 'onChangeDefaultTopic'
}
}
In your view controller:
onChangeDefaultTopic: function (column, rowIndex, checked, record) {
if (checked) {
store.getRange().forEach((rec) => {
if (record.get('id') !== rec.get('id')) {
rec.set('active', false)
}
});
}
}
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 have a requirement to display combobox and datefield in Grid columns. So used widgetcolumn and created grid with those fields.
But now on changing data in combobox or datefield, new values should be updated in grid store so that after going to next page and coming back, values should persist in previous pages.
Can someone let me know how I can achieve this?
Fiddle: https://fiddle.sencha.com/#fiddle/183r
Option1: Use both widget and cell editor.
Add CellEditing plugin and set editor to same component as widget.
{ xtype: 'widgetcolumn', text: 'Gender', dataIndex: 'gender', flex: 1,
widget: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'},
editor: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'}
},
Example: https://fiddle.sencha.com/#fiddle/1843
Option2: Manually update the record.
I feel this solution is better.
widget: {xtype: 'datefield',
listeners:{
select: function(datefield, value, eOpts){
var rowIndex = datefield.up('gridview').indexOf(datefield.el.up('table'));
var record = datefield.up('gridview').getStore().getAt(rowIndex);
record.set('dob', value);
}
}
}
Example: https://fiddle.sencha.com/#fiddle/1842
To get rowIndex in widgetColumn, I referenced "How to get rowIndex in extjs widget column" DrakeES's answer.
The best solution i could find.
The function "getWidgetRecord" is not findable with the search.
It is discribed within the widget config description.
Have a look at the following Links.
https://docs.sencha.com/extjs/5.1.3/api/Ext.grid.column.Widget.html#cfg-widget
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Widget.html#cfg-widget
A config object containing an xtype.
This is used to create the widgets or components which are rendered into the cells of this column.
This column's dataIndex is used to update the widget/component's defaultBindProperty.
The widget will be decorated with 2 methods: getWidgetRecord - Returns
the Ext.data.Model the widget is associated with. getWidgetColumn -
Returns the Ext.grid.column.Widget the widget was associated with.
widget:{
xtype:'combo',
editable: false,
store: Ext.create('Ext.data.Store',{
fields:['name','text'],
data:[
{"name":"integer", "text":"Integer"},
{"name":"float","text":"Float"}
]
}),
listeners:{
select: function(combo, value, eOpts){
var record = combo.getWidgetRecord();
record.set('type', value.get('name'));
}
},
valueField:'name',
displayField:'text',
allowBlank: false
}
or
widget: {
xtype: 'textfield',
allowBlank: false,
listeners:{
change: function(textfield, value, eOpts){
var record = textfield.getWidgetRecord();
record.set('field', value);
}
}
}
For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS
Like this with jQueryUI: http://jqueryui.com/demos/button/#radio
Thanks in advance,
Chielus
I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.
See this example:
{
xtype: 'button',
text: 'Choice 1',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 2',
toggleGroup: 'mygroup'
}, {
xtype: 'button',
text: 'Choice 3',
toggleGroup: 'mygroup'
}
Buttons also have a property called enableToggle, that allows them to toggle, and is automatically set to true when you set a toggleGroup, and toggleGroup tells ExtJS how they are related.
Note, they look like regular ExtJS buttons, but behave like you want.
There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to false:
{
xtype: 'radiogroup',
layout: 'hbox',
defaultType: 'button',
defaults: {
enableToggle: true,
toggleGroup: 'mygroup',
allowDepress: false,
items: [
{ text: 'Choice 1'},
{ text: 'Choice 2'},
{ text: 'Choice 3'}
]
}
}
Just to answer #mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:
listeners: {
click: function(me, event) {
// make sure a button cannot be de-selected
me.toggle(true);
}
}
That way, each click on a button will re-select it.
-DBG
Just adding to the #deebugger post. You can also use the following button property to not allow to deselect a selection
Ext.create('Ext.Button', {
renderTo : Ext.getBody(),
text : 'Click Me',
enableToggle : true,
allowDepress : false
});