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;
}
Related
I'm working on building a responsive mobile navigation menu, and ran into an error with toggling open/close
The way I decided to go about it is to add className="show" that has a property of display: block to what's currently active, and className="hide" with a property of display: none.
This is my set up:
import {MenuOpen, MenuClose} from '../assets/AssetsIndex';
function menuActive() {
let menu = document.getElementById('mobile-menu');
let menuOpen = document.getElementById('menu-open');
let menuClose = document.getElementById('menu-close');
menu.classList.contains('active') ? open() : close();
function close() {
menu.classList.add('active');
menuClose.classList.add('show');
menuOpen.classList.add('hide');
menu.style.transform = 'translateX(0%)';
}
function open() {
menu.classList.remove('active');
menuOpen.classList.add('show');
menuClose.classList.add('hide');
menu.style.transform = 'translateX(100%)';
}
}
Initializing the menu icon with the class name:
<MenuOpen className='menu show' onClick={menuActive} id='menu-resting' />
<MenuClose className='menu hide' onClick={menuActive} id='menu-open' />
Scss:
.menu {
cursor: pointer;
margin: 0 auto;
position: absolute;
right: 2%;
z-index: 100;
&:hover path {
fill: #fff;
}
path {
fill: #fff;
}
}
.show {
display: block;
}
.hide {
display: none;
}
Error:
I went about displaying the menu container in the same way, so I'm not sure why I can't do the same with an SVG element. I've tried adding the properties with JS but ran into the same issue of the property value is null.
If anyone can tell me what I'm doing wrong that would be greatly appreciated.
There is no element with id menu-close in your code. Probably a typo. Assuming id prop of the MenuClose component is the id of the underlying element you have menu-open there.
Also, I would suggest using state hook for controlling whether the Menu is open or closed.
I have created a plunker here http://plnkr.co/edit/VIMTutnu1BzGVfujlhhJ and wanted to see if anyone can throw some pointers to make these cell backgrounds(obviously show up as square) into circles. Basically I am using the ngCellText as shown below:
cellTemplate: '<div title="{{row.entity.EHStatus.TOPPER.desc}}" class="ngCellText"'+
'ng-class="{\'green\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'1\' ,\'orange\' : row.getProperty(\'EHStatus.TOPPER.code\') > \'1\',\'red\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'0\',\'yellow\' : row.getProperty(\'EHStatus.TOPPER.code\') < \'0\'}" > </div>'},
Are there any good clean ways of achieving this? Please let me know!!
Just give border-radius: 50% to all your color classes
Something like this:
.green {
background-color: green;
color: white;
border-radius: 50%;
}
How can I add a loadmask within the launch method of the Ext.applcation to the viewport that will also covers floating components like windows when get showed?
Currently the mask work but does not cover any opened window.
I found the answer here, the trick is to increase the z-order of the mask:
Ext.getBody().mask().dom.style.zIndex = '99999';
I made a test, it works for me.
You can create custom loader that will hide itself when everything is loaded...
1.Create html holder in body:
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading. Please wait...</span>
</div>
2. Add css to properly position mask:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 12px;
}
#loading span {
padding: 5px 30px;
display: block;
}
3. Create js function outside Ext.onReady call:
function hidePreloader() {
var loadingMask = Ext.get('loading-mask');
var loading = Ext.get('loading');
// Hide loading message
loading.fadeOut({ duration: 0.2, remove: true });
// Hide loading mask
loadingMask.setOpacity(0.9);
loadingMask.shift({
xy: loading.getXY(),
width: loading.getWidth(),
height: loading.getHeight(),
remove: true,
duration: 1,
opacity: 0.1,
easing: 'bounceOut'
});
}
4. Call hidePreloader method when all components and tasks are completed and ready, in your case after app.js launch method is fininshed loading, for example:
listeners: {
afterrender: function(form) {
hidePreloader();
}
}
here is a example in fiddle.
I preferred my solution with CSS:
body.x-masked .x-mask {
z-index: 20000;
}
since window z-index is 19001, so 20000 is not bad.
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