I have set a button like this:
xtype: 'button',
icon: 'icons/money_add.png',
text: 'Details',
iconAlign: 'left',
scale: 'small',
I need to change the icon, iconAlign and scale based on some conditions
I managed to change the icon and the scale like this:
buttonPath('#buttonId').setIcon('icons/newIcon.png');
buttonPath('#buttonId').setScale('large');
I need to change the iconAlign from letf to top but it is not working
I have tried
buttonPath('#buttonId').setIconAlign('top');
and it didn't work. Is there any way to change it ?
The button properies you mentioned are bindable. Here is an example of using binding to change the values of buttons. I bind to a boolean for hiding and showing buttons, makes it easy to make the buttons active based on other rules so you don't have to find the button and call a method when something in your app changes.
Button Properties and Binding
Related
I have a grid with two checkcolumns (apart from the rest columns) and I want to make conditional change of cell (adding specific CSS: making thicker borders of this cell if checkcolumn is enabled and default look if it is disabled) in accordance to disable / enable state.
Unfortunately with using Renderer function I end up with strange outcome (displayed object text or true/false values) because of override native Renderer of checkcolumn I presume. Overwriting checkcolumn renderer is also bad practice which I'm not allowed to do.
I've also tried to use listeners like beforeactivate, beforeDisable etc but they seems not being called whenever state of cell change (disabled <> enabled). I thing that it is possible that its because of using specific bind property as seen bellow.
Is there any method to do it clear (without to much of code repetition and without overriding and adding new method to checkcolumn renderer)??
here is code for one of two checkcolumns in my grid:
{
localized: {
text:
'details.tabview.coordination.icccoordination.changepositions.main.view.ebv'
},
dataIndex: 'ebv',
width: 50,
bind: {
disabled: '{!changeContextEditMode.active}'
},
sortable: true,
filter: true,
xtype: 'checkcolumn',
listeners: {
beforecheckchange: 'checkIfCheckChangePossible'
}
}
I will appreciate any help
I'm ExtJs 6.0 framework developer.
I want to develop a component like date that when user click it, It open a window and this window have some textfields and other Extjs components. My problem is when I want to use this component as a grid cell editor. it does not show the component. In other words, I want to develop a custom picker.
How do I do?
You can extend Ext.form.field.Picker and implement createPicker:
An abstract class for fields that have a single trigger which opens a
"picker" popup below the field, e.g. a combobox menu list or a date
picker. It provides a base implementation for toggling the picker's
visibility when the trigger is clicked, as well as keyboard navigation
and some basic events. Sizing and alignment of the picker can be
controlled via the matchFieldWidth and pickerAlign/pickerOffset config
properties respectively.
You would not normally use this class directly, but instead use it as
the parent class for a specific picker field implementation.
Subclasses must implement the createPicker method to create a picker
component appropriate for the field.
It can look like:
Ext.define('Fiddle.view.FooPicker', {
extend: 'Ext.form.field.Picker',
xtype: 'foo-picker',
createPicker: function(){
return Ext.widget('container',{
padding: 20,
floating: true,
items: [
{
xtype: 'textfield'
},
{
xtype: 'box',
html: 'Foo'
}
]
})
}
});
https://fiddle.sencha.com/#fiddle/1139
I'm using ExtJS 5 and am having some issues with tooltip positioning. Specifically, when I have a button in the bottom right corner of the page, the tooltip covers the entire button itself.
I've tried using the anchorTo property but it doesn't seem to affect anything. Trying to figure out how I can position the tooltip above the button instead of right on top of it. I'm sure there's an easy solution - any help would be greatly appreciated. Thanks.
See fiddle here: https://fiddle.sencha.com/#fiddle/j94
You can try by adding this attribute -
tooltipType: 'title'
here..
bbar: {
items: ['->', {
text: 'My Button',
tooltip: 'tooltip positioned on top of button',
tooltipType: 'title'
}]
}
Here's what it says in the doc - http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.button.Button-cfg-tooltipType
qtip will work if you've more space below the button, in your fiddle there is no space available to draw your qtip over the button. You can check it by changing the layout to form -
layout: 'form'
or by adding padding as
padding: '20 20 20 20',
to your fit layout
I was able to get it to work by inspecting the inner workings for the tooltip mechanism and adding a 'mouseOffset' array:
tooltip: {
text: 'tooltip positioned on top of button',
mouseOffset: [0,-60]
}
What I am trying to accomplish is to add information to a datagrid, then what I have its a button 'add', when I click it, it will show a panel where I can add all the information needed to fill the datagrid.
The panel to add the info should be shown like this:
http://img94.imageshack.us/img94/2662/emailhelp.jpg
The one above I have done it with a messagebox like this:
Ext.MessageBox.show({
title : 'Email Information',
msg : 'your email:',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : addEmailInfo,
animateTarget : 'btn_add'
});
Then what I want is something similar but with a panel, in which I could add more components.
I've been searching but I havent found anything, thank you in advance.
I've looked, but there is not a predefined ExtJS method to open a grid row in a form panel (should be).
There is an in-line row editing extension for ExtJS grids which works really well. Just double click a grid row and the record opens editable fields for any data you set as editable. Some more details on implementing it are here.
If that won't work-out for you, you would have to create a new Ext.window and add your own form panel / fields into it. Create an onclick listener in the grid which
populates the form / fields with the selected record data and
shows the window (myWindow.show()).
You would also have to write a method to save your edited or newly created record into the datastore (using myDataStore.set([field],[value])) also a line to commit it to the database (if that is where you are getting data).
To answer your question more exactly, a new window that you can add other fields to could be done like this:
myWindow = Ext.create('Ext.window.Window', {
id: 'recordWindow',
title: 'New Particle',
resizable: false,
closable: false,
width: 605,
minWidth: 300,
minHeight: 200,
y: 150,
layout: 'fit',
plain:true,
items: myFormPanel, //your form or fields would go here
buttons: [{
text: 'Save',
handler: saveRecord()
},{
text: 'Cancel',
handler: resetRecordWindow()
}]
});
How about this example? It shows a grid with an edit form to the right of it.
If you don't like that than you can wrap the form into the window component like Geronimo suggested.
http://docs.sencha.com/ext-js/4-0/#!/example/form/form-grid.html
I have a toolbar like this:
tbar : {
xtype: 'toolbar',
tooltip: 'Right click to clear',
items: [
{
xtype: 'form',
padding: 2,
height:25
}]
}
My tooltip does not show up. I have done QuickTips.init(). Also, is it possible to include some dynamic text in the tooltip?
In your code, you are attempting to put a toolbar inside of a toolbar. Are you sure that is really what you are trying to do?
Your tooltip probably does not work because tooltip is not a valid property of the toolbar object.
As for dynamically altering the tooltip text, you have the getText(string) method.
According to the ExtJS API documentation, Toolbar does not have a tooltip property. In order to use the tooltip, you'll need to apply the tooltip directly to an HTML element, or use the tooltip on a valid, supported object.