I have an EXTJS TimePicker control. I want to add a border around the picker box itself, not the label or overall panel just the box when the user clicks in the field. I have the follow code the provides a partial solution. It used to work when the label was to the left of the control. Once I moved the label to the top I get the incorrect behavior:
function txtTimeCtr_Focus(sender, event, eOpts )
{
//Change the border color to red to show the time is no longer running
sender.getPicker().pickerField.getEl().addCls('txtTime-focus-border');
//sender.getEl().addCls('txtTime-focus-border');
}
Here is a screen shot of what I am currently receiving
:
This is the functionality I need to obtain:
Thanks in advance everyone.
You need to set the style on the triggerWrap:
var f = new Ext.form.field.ComboBox({
renderTo: document.body
});
f.triggerWrap.setStyle('border', '1px solid red');
Related
In Sencha, I'm able to mask a background component and bring up a dialog component nicely by calling this.view.mask() on the background component.
Then when I press "Submit" on the top dialog, I want to have a mask cover the dialog and background component all together instead of just masking the smaller dialog box. I don't want to just mask the dialog box, because even though the background is masked too, the dialog box's border is still obviously bright.
How can I mask both components all together?
On the dialog box I tried this.view.mask("Loading..."), but only the small dialog box is masked. Its border is still clearly bright so it's clear we're just putting a mask on the small dialog box rather than on the whole page.
I tried querying the background component via view=Ext.ComponentQuery.query('MyComponent')[0] and then using view.mask("Loading"), but this only adds the mask to that background component.
This is an ugly solution, but it worked for me. Tested on 7.0.0
var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
wndSize = wnd.getSize(),
myMask;
myMask = new Ext.LoadMask({
msg : 'Please wait...',
target : wnd,
height: wndSize.height,
width: wndSize.width
});
myMask.show().setXY(wnd.getXY());
I am using AnyMap and my client wants to display some information in the legend for unbound regions.
Because I can just add a legend item for a series I am implementing an empty series and then adding a legend item on this. However as there is no country to select I do not want my legend item to be selectable. How can I prevent this?
The only solution I found for this is applying "disabled:true" to my legendItem, but then the color changes..
This is how my code looks so far
var unboundRegions = anyMap.choropleth();
unboundRegions.legendItem({text: data.unbound, iconType: "square", iconFill: '#ffffff', iconStroke: '#e8e8e9', disabled: true});
Any ideas?
You can prevent legend icon selection using "legendItemMouseDown" legend event listener - just prevent its default behavior using e.preventDefault();
jsfiddle example
I have a toolbar in ExtJS and I have a button, I am actually disabling the button in some cases if the user doesn't have access. If I disable it, it is disabled and doesn't launch the client event. So that's great.
But hovering over the button still changes the background color of the button indicating to the user that its enabled and its not.
I tried looking into some CSS issues but I couldn't find anything.
How can I to do this? The only thing I am doing on the button Item is:
disabled: !isAdmin
and the toolbar is being created like so:
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
dock: 'top',
width: 700,
height: 56,
items: [
Am I missing something?
I have created Sencha fiddle for the same it works fine. I tried with Extjs 4.2 version also and it don't change background color on hover for disabled button
https://fiddle.sencha.com/#fiddle/14j8
Check overCls for more information
I m getting a white background in my ComboBox in javaFx
Screenshot of combobox I m getting
I simply used this
ComboBox mode = new ComboBox();
mode.getItems().addAll("Cash", "Cheque", "Account Transfer");
Please tell me how to resolve this..
As you can read here, when the combo is shown a PopupControl that extends `PopupWindow' is shown. It has its own scene and styling.
My guess is you have some styling applied to the CSS rule .root.popup, something like this:
.root.popup {
-fx-background-color: white;
}
Try to remove that sytling or change it to:
.root.popup {
-fx-background-color: transparent;
}
and check if the problem is solved.
I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.
Currently I have tried:
afterRender: function(me) {
Aloha.jQuery('#' + me.myId).aloha();
document.getElementById(me.myId).setAttribute("draggable", true);
}
This one doesn't allow it to be draggable, but edit works.
Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true
This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.
Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();
Again this one allows for editing but not dragging.
It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?
To Solve this, I did a Move Handler, HTML5 Style:
http://www.w3schools.com/html/html5_draganddrop.asp
And made my main canvas the drop area.
Next I added a small div inside the component which is editable.
and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.