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.
Related
I need to create a contextmenu in ExtJS 7.4 on right click but there's only childtap which only triggers on left-click event.
Is there a way to trigger that event or another for right-click?
I added two solutions. The first is a component solution (here Grid) and the second a global one.
COMPONENT
The solution would be the childcontextmenu listener.
Have a look at the following example (Modern toolkit 6+7)
const menu = new Ext.menu.Menu({
items: [{
text: 'Menu Item 1'
}, {
text: 'Menu Item 2'
}]
});
Ext.define('MyApp.MyGrid', {
extend: 'Ext.grid.Grid',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}],
listeners: {
childcontextmenu: function (grid, eObj) {
grid.deselectAll();
grid.setSelection(eObj.record);
menu.showAt(eObj.event.getX(), eObj.event.getY());
eObj.event.stopEvent()
}
}
})
GLOBAL
I can show you how to fire global events, but the problem is the target. In the following example I am using document but you can also use any view.el.on and the target will be always the view. More answers might be found here
Ext.getDoc().on(
'contextmenu',
function(e){
Ext.GlobalEvents.fireEvent('contextmenu', e);
},
Ext.GlobalEvents
);
Ext.GlobalEvents.on('contextmenu', function(eObj) {
console.log('Who dares to RightClick me?');
});
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();
}
}
PROBLEM: We toggle fields on form. When secondField is shown instead of firstField, then form is changed. But secondField is still marked as not dirty, because both fields remain unchanged. Showing secondField should always make it and the form (model) dirty.
RESEARCH: setDirty() method is done on whole record, setValue() acts as expected, but smells like a hack and can't be used for various field types (textfield, combobox).
QUESTION: How to manually set a single form field state changed to invoke saving its data?
You are mixing up data state with form visualisation. By default, "field is shown" has no relation to data, so you need to explicitly create one. This can be done by changing some data on toggling, or other way round — toggling on changing data.
For example, toggling can occur on checking/unchecking a checkbox field which will represent a piece of form data (also see fiddle):
Ext.create('Ext.form.Panel', {
viewModel: {
type: 'default'
},
items: [
{
xtype: 'checkbox',
reference: 'toggle',
itemId: 'toggle',
boxLabel: 'Toggle',
hidden: true
},
{
xtype: 'button',
text: 'Toggle',
enableToggle: true,
toggleHandler: function() {
var form = this.up('form'),
checkbox = form.child('#toggle');
checkbox.setValue(!checkbox.getValue());
console.log(form.isDirty() ? 'Dirty!' : 'Not dirty');
}
},
{
xtype: 'textfield',
name: 'firstField',
fieldLabel: 'First Field',
bind: {
hidden: '{toggle.checked}'
}
},
{
xtype: 'textfield',
name: 'secondField',
fieldLabel: 'Second Field',
bind: {
hidden: '{!toggle.checked}'
}
}
],
renderTo: Ext.getBody()
});
I have a formPanel set up with a text field. When a button is pressed, I would like it to change the disabled property of the text field from true to false, allowing it to be editable. The problem is that I don't know how to make this stick. Here's the form code:
myApp.views.formContainer = new Ext.form.FormPanel({
id: 'inspectionForm',
layout: 'vbox',
width: '100%',
items: [{
xtype: 'textfield',
name: 'myText',
id: 'myText',
label: 'License Plate',
width: '90%'
},
{
xtype: 'button',
text: 'Submit',
height: 40,
ui: 'confirm-round',
handler: function()
{
Ext.get('myText').disabled = false;
}
}]
});
The thing about Ext.get('mytext'),disabled = false; is that it works. Checking it later shows that the disabled attribute is set to false. But you still can't edit it. Does anyone know how to do this?
By calling Ext.getCmp('mytext').disabled = false; you only change the initial config property. To actually modify the component use Ext.getCmp('mytext').enable(); and Ext.getCmp('mytext').disable();
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
});