Before I dive into source code and hack it.
I set allowBlank: false on radio group. I would like to mark it if none of the radio is selected. What method to override ?
Regards
Armando
just override validate method and do the magic there.
.field-container-error-border {
background-image: url(../ext4/extjs/ext-4_2_1/resources/ext-theme-gray/images/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: bottom;
border-bottom: 1px solid #c30 !important;
}
Ext.override(Ext.form.RadioGroup, {
validate: function() {
let isValid = this.callParent();
let el = Ext.dom.Element.get(this.el.query('.x-table-plain')[0]);
if (!isValid) {
el.addCls('field-container-error-border');
} else {
el.removeCls('field-container-error-border');
}
return isValid;
},
});
Related
I am working with a Sencha Touch app with the component "segmentedbutton"
{
xtype : 'segmentedbutton',
cls : 'filterbar-segmented-button',
pressedCls: 'filterbar-segmented-button-pressed',
items : [
{
itemId : 'showAllCustomers',
iconCls : 'user',
iconMask: true,
pressed : true
},
{
itemId : 'showCustomersWithSurvey',
iconCls : 'compose',
iconMask: true
}
]
}
I am specifying different css classes depending of the button is pressed or not.. but it is not working correctly and the colour of the font is not changing..
Here the css code:
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
.filterbar-segmented-button-pressed{
background-color: blue;
color: white;
}
}
What am I doing wrong?
Thank you in advance
Your Applying Css In Wrong Way the Hierarchy of the Css Class is Wrong
'filterbar-segmented-button',
'filterbar-segmented-button-pressed'
These Two Css Will be applied to the Same Segmented Button.
Inorder to Apply the Presed Cls For the Button
.filterbar-segmented-button.filterbar-segmented-button-pressed{
//PRessed Cls Code
}
This Will Work As Expected
I found the solution of this way..
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
.filterbar-segmented-button-pressed{
background-color: blue;
.x-button-icon,
.x-button-label {
color: #f8f8f8;
}
}
}
Your css is not correct. Try this.
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
}
.filterbar-segmented-button-pressed{
background-color: blue;
color: white;
}
I have an Ext JS pie chart with too many items. Because of this legend overflows and few items are not visible. I took a look at Smart legends (https://market.sencha.com/extensions/ext-ux-chart-smartlegend). But that seems ugly when the legend items are too many, and that makes the Chart looks tiny. So I'm looking for a solution where it would add a vertical scrollbar (when legend is in left or right hand side of the graph).
I was trying to see if I could add the scrollable container to the graph on which I could add the legends and when it overflows, scrollable container would add the scrollbar. So I was trying to override the "Ext.chart.Legend", and override the 'createBox' function. But I'm not sure how to add the component to the Chart since createBox() adds the Sprite to the chart's surface. Not sure how to add the 'scrollable container' to the chart on which I could add the legend.
Basically I'm looking for the graph which looks like in the attached image. Please help me on this.!! I need it ASAP. Thanks in advance!
https://www.dropbox.com/s/4q9o6v5ei4ba96r/Chart%20Legend%20items%20with%20scroll%20bar.png
Thanks!
Omega
JavaScript:
Ext.override(Ext.chart.Legend, {
createItems: function() {
if (this.customLegend != null) {
this.customLegend.remove();
}
this.customLegend = $('<div class="custom-legend"></div>');
$(this.chart.el.dom).append(this.customLegend);
this.callParent();
},
createLegendItem: function(series, yFieldIndex) {
var colorItem = series.getLegendColor(yFieldIndex).match(/.+?\-(.+?)\-.+?/i)[1];
var legendItem = $('<div class="custom-legendItem"><div class="custom-legendItemMarker" style="background-color: #'+colorItem+'"></div>'+series.yField[yFieldIndex]+'</div>');
$(this.customLegend).append(legendItem);
legendItem.on('mouseover', function() {
series._index = yFieldIndex;
series.highlightItem();
});
legendItem.on('mouseout', function() {
series._index = yFieldIndex;
series.unHighlightItem();
});
legendItem.on('mousedown', function() {
var me = this,
index = yFieldIndex;
if (!me.hiddenSeries) {
series.hideAll(index);
legendItem.addClass('hide');
} else {
series.showAll(index);
legendItem.removeClass('hide');
}
me.hiddenSeries = !me.hiddenSeries;
me.legend.chart.redraw();
});
},
updateItemDimensions: function() {
return {
totalWidth: 0,
totalHeight: 0,
maxWidth: 0,
maxHeight: 0
};
},
updatePosition: function() {
},
removeItems: function() {
}
});
CSS:
.custom-legend {
position: absolute;
right: 20px;
top: 0;
height: 100%;
overflow-y: auto;
border: 1px solid #CCC;
padding: 20px;
min-width: 200px;
}
.custom-legendItem {
margin: 4px 0;
}
.custom-legendItem.hide {
opacity: 0.5;
}
.custom-legendItem:hover {
cursor: pointer;
font-weight: bold;
}
.custom-legendItemMarker { display: inline-block; width: 12px; height: 12px; margin-right: 12px; }
I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.
If they do this using CSS, what CSS do I use and when/how to I apply it?
I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.
/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
background-image: none;
border: 0px none;
margin-top: 1px;
}
a.ux-linkbutton.x-btn-default-small-focus {
background-color: inherit;
}
a.ux-linkbutton * {
font-size: inherit !important;
}
a.ux-linkbutton:hover {
text-decoration: underline;
background-color: inherit;
}
/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
extend: "Ext.button.Button",
alias: "widget.linkbutton",
cls: "ux-linkbutton",
initComponent: function() {
this.callParent();
this.on( "click", this.uxClick, this, { priority: 999 } );
},
// This function is going to be used to customize
// the behaviour of the button and click event especially as it relates to
// its behaviour as a link and as a button and how these aspects of its
// functionality can potentially conflict.
uxClick: function() {
//Ext.EventObject.preventDefault();
//Ext.EventObject.stopEvent();
//Ext.EventObject.stopPropagation();
//return false;
}
} );
The click handler is a work-in-progress.
The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.
With Ext 4.0.7 I had managed to do the following:
View:
...
{
xtype: 'button'
,text: 'Discard changes'
,action: 'cancel'
,cls: 'secondary-action-btn'
}
CSS:
....
.secondary-action-btn {
border: none;
background: none;
}
.secondary-action-btn span {
cursor: pointer;
text-decoration: underline;
}
I recall there is an extension called linkButton. You can refer to the extjs forum here
When I set a form field into the disabled state using setDisabled or the disabled: true config, for example:
form.getComponent(1).setDisabled(true);
it makes the field unreadable due to the transparency. Is there a good way to improve the look and feel of my disabled fields?
This Worked for me:)
.x-item-disabled {
filter : '' !important;
}
A quick solution is to change the opacity setting in the ext-all.css (or ext-all-debug.css) file. The default setting seems to be:
.x-item-disabled .x-form-trigger {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3; }
If you change the opacity values to 0.6 you get a readable form.
Obviously not ideal as you are changing the core framework files but I certainly didn't find a quicker way to correct this.
I did something similar to y'all..
in ExtJS
{
xtype: 'combobox',
name: 'comboTest',
store: "ComboTest",
fieldLabel: "testCombo",
queryMode: "local",
displayField: "display",
valueField: "value",
disabledCls: "disabledComboTestCls" // you are now totally overriding the disabled class as set by .x-item-disabled
}
In you CSS file
.disabledComboTestCls {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.disabledComboTestCls input {
font-weight: bold;
color: #888888;
}
And this works well.
We use an override on Ext.form.Field, which hides the triggers etc, and then we add a css class. We then style the component, because the disabled function of ExtJS is indeed not readable enough.
Here is example code:
var originalRender = Ext.form.Field.prototype.onRender;
Ext.override(Ext.form.Field, {
UxReadOnly: false,
UxDisplayOnly: function (displayOnly, cls) {
// If no parameter, assume true
var displayOnly = (displayOnly === false) ? false : true;
if (displayOnly) {
// If a class name is passed in, use that, otherwise use the default one.
// The classes are defined in displayOnly.html for this example
var cls = (cls) ? cls : 'x-form-display-only-field';
// Add or remove the class
this.addClass(cls);
// Set the underlying DOM element's readOnly attribute
this.setReadOnly(displayOnly);
this.editable = false;
// Get this field's xtype (ie what kind of field is it?)
var xType = this.getXType();
if (xType == 'combo' | xType == 'combobox' | xType == 'Ext.ux.Combo' | xType == 'Ext.ux.ComboSearch') {
this.addClass('x-form-display-only-combo');
this.hideTrigger = true;
this.on('expand', function (field) {
if (field.hideTrigger)
field.collapse();
});
}
else if (xType == 'datefield') {
this.addClass('x-form-display-only-datefield');
this.hideTrigger = true;
this.on('expand', function () {
if (this.hideTrigger)
this.collapse();
});
this.editable = false;
} //elseif for each component u want readonly enabled
else {
this.addClass('x-form-display-only-other');
}
// For fields that have triggers (eg date,time,dateTime),
// show/hide the trigger
if (this.trigger) {
this.trigger.setDisplayed(!displayOnly);
}
} else {
this.UxFullField(cls);
}
},
afterRender: function () {
var me = this;
me.UxDisplayOnly(me.UxReadOnly, 'x-form-display-only-field');
this.callParent(arguments);
},
UxFullField: function (cls) {
// If a class name is passed in, use that, otherwise use the default one.
// The classes are defined in displayOnly.html for this example
var cls = (cls) ? cls : 'x-form-display-only-field';
this.removeCls(cls);
// Set the underlying DOM element's readOnly attribute
this.setReadOnly(false);
this.editable = true;
// Get this field's xtype (ie what kind of field is it?)
var xType = this.getXType();
if (xType == 'combo' | xType == 'combobox' | xType == 'Ext.ux.Combo' | xType == 'Ext.ux.ComboSearch') {
this.removeCls('x-form-display-only-combo');
this.setHideTrigger(false);
}
else if (xType == 'datefield') {
this.removeCls('x-form-display-only-datefield');
this.setHideTrigger(false);
this.editable = true;
}//elseif for each component u want readonly enabled
else {
this.removeCls('x-form-display-only-other');
}
// For fields that have triggers (eg date,time,dateTime),
// show/hide the trigger
if (this.trigger) {
this.setHideTrigger(false);
}
}
});
With css you hide stuff like borders etc...
.x-form-display-only-field{}
.x-form-display-only-other input, .x-form-display-only-other select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-combo input, .x-form-display-only-combo select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-datefield input, .x-form-display-only-datefield select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-file input, .x-form-display-only-file select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-checkbox { }
.x-form-display-only-radiogroup { }
Now you can add your field the following way:
Ext.create('Ext.form.field.Text', {
name: 'example',
UxReadOnly: true
});
For you Googlers, these answers are outdated if you're on Ext 5 and up. There's now a readOnly bool. The field looks exactly the same, but the value isn't editable.
documentation
I have a grid, with checkcolumn. It's dataIndex is, for example, 'checked'.
I want to disable or hide checkboxes for some rows, where another value, 'can_be_checked' for example, is false/empty.
Renderer is already defined in checkcolumn, messing with it breaks generation of checkbox.
How can I do it?
You may hide the checkbox just inside the renderer, for example:
column.renderer = function(val, m, rec) {
if (rec.get('can_be_checked') == 'FALSE'))
return '';
else
return (new Ext.ux.CheckColumn()).renderer(val);
};
I was looking for a solution to this and came across this question, but no workable solution anywhere to show a disabled checkbox instead of NO checkbox as covered in the other answer. It was kind of involved but here's what I did (for 4.1.0):
I found that the extjs\examples\ux\css\CheckHeader.css file that
is used by Ext.ux.CheckColumn does not have a disabled class, so I
had to modify it to be more like the standard checkbox styling
contained in ext-all.css (which does include a disabled checkbox
class).
I had to extend Ext.ux.CheckColumn to prevent events being
fired from disabled checkboxes.
Finally, I had to provide my own renderer to apply the disabled
class according to my logic.
The code is as follows.
Modified CheckHeader.css:
.x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 4px;
padding-bottom: 2px;
line-height: 14px;
}
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 3px;
}
.x-grid-checkheader {
width: 13px;
height: 13px;
background-image: url('../images/checkbox.gif');
background-repeat: no-repeat;
background-color: transparent;
overflow: hidden;
padding: 0;
border: 0;
display: block;
margin: auto;
}
.x-grid-checkheader-checked {
background-position: 0 -13px;
}
.x-grid-checkheader-disabled {
background-position: -39px 0;
}
.x-grid-checkheader-checked-disabled {
background-position: -39px -13px;
}
.x-grid-checkheader-editor .x-form-cb-wrap {
text-align: center;
}
The background-image url above points to this image which normally ships with extjs 4.1.0 at: extjs\resources\themes\images\default\form\checkbox.gif.
The extended Ext.ux.CheckColumn class so that events will not get fired from disabled checkcolumns:
Ext.define('MyApp.ux.DisableCheckColumn', {
extend: 'Ext.ux.CheckColumn',
alias: 'widget.disablecheckcolumn',
/**
* Only process events for checkboxes that do not have a "disabled" class
*/
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
var enabled = Ext.query('[class*=disabled]', cell).length == 0,
me = this;
if (enabled) {
me.callParent(arguments);
}
},
});
Implementation with custom renderer to apply disabled class according to my own logic:
column = {
xtype: 'disablecheckcolumn',
text: myText,
dataIndex: myDataIndex,
renderer: function(value, meta, record) {
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'],
disabled = // logic to disable checkbox e.g.: !can_be_checked
if (value && disabled) {
cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
} else if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
} else if (disabled) {
cls.push(cssPrefix + 'grid-checkheader-disabled');
}
return '<div class="' + cls.join(' ') + '"> </div>';
}
};
Using extjs 5 it is easier to return defaultRenderer in renderer method for target checkboxes and '' for others.
renderer: function (value, metaData, record) {
return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);
}
Such won't render checkbox itself but all the events (i.e. checkchange, itemclick, etc) will be remained. If you don't want them either, you may disable them in beforesmth event, for example
onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) {
var row = me.getView().getRow(rowIndex),
record = me.getView().getRecord(row);
return !record.isLeaf();
},
I found the solution to the problem of the checkbox not clickable when usign Aniketos code, you have to make sure that in your code of the column you specify the xtype: 'checkcolumn, that will do the trick
I also ran into this problem and to take it a step further I needed to have a tooltip show over the checkbox. Here's the solution I came up with that seems to be the least invasive on the existing checkcolumn widget...
renderer: function (value, metaData, record) {
// Add a tooltip to the cell
metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"';
if (record.get("someColumn") === "") {
metaData.tdClass += " " + this.disabledCls;
}
// Using the built in defaultRenderer of the checkcolumn
return this.defaultRenderer(value, metaData);
}