I have a combo box that i am simply trying to make bold. The data is in a store. I can bold the item in the list, but i cannot bold the item after it is selected in the text box.
I have tried:
fontWeight: 'bold',
cls: 'make-bold',
itemCls:'make-bold',
I can bold the list via a template but not the item actually in the text field.
items:[
{
xtype: 'combobox',
name: 'inputType',
id: 'inputType',
padding : '6 5 5 5',
store: 'Codes',
displayField: 'display',
valueField: 'code',
value: 'Inp_CODE',
editable: false,
width: 80,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">','<div class="x-boundlist-item"><b>{display}</b></div>','</tpl>')
}, {
this did it
fieldCls: 'make-bold',
style: {
fontWeight: 'bold'
}
why do i need both?
Related
How can I align child buttons of segmented button in tabular layout? For example, if there are six buttons, how to arrange them in two rows with three buttons in each row?
Ext.create('Ext.button.Segmented', {
renderTo: Ext.getBody(),
allowMultiple: false,
items: [{
text: 'Segment Item 1',
},{
text: 'Segment Item 2',
},{
text: 'Segment Item 3'
},{
text: 'Segment Item 4',
},{
text: 'Segment Item 5',
},{
text: 'Segment Item 6'
}]
});
I've found it. If someone needs it, it is:
layout: {
type: 'table',
columns: 3
},
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
I have a form with two textfields which are aligned in 'vbox' format with align as 'stretch'. I wish to now add a SAVE button which should be aligned in the middle of the form. How do I define this button to be exactly aligned in the middle just like in a usual alert where the OK button is in the middle of the alert box.
If it can be done without CSSS then that would be preferable.
buttonAlign : The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).
Another way is to use dockedItems with layout:'hbox' and pack:'center'
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
width: 300,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
title: 'Contact Info',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address'
}],
buttons: [{
text: 'Save'
}],
buttonAlign: 'center',
renderTo: Ext.getBody()
})
}
});
FIDDLE
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]
I am using the YUI Rich Text Editor (YAHOO.widget.Editor), and I got it working fine, except for one thing. I cannot figure out how to configure the font size of the text that I type in the editor box (input type="textarea"). I want that text to be 150%. I know that I need a CSS rule of the form:
some-YUI-related-selector {
font-size: 150%;
}
but I cannot figure out the identity of "some-YUI-related-selector".
I'd appreciate any help I can get.
Thanks, Jay
More information:
I want my web to display large fonts, so I used a CSS style for the div in question as follows:
div.newsform {
font-size:120%;
}
div.newsform input {
font-size:120%;
}
input#newsgoals {
font-size:150%;
}
The HTML page snippet in question is:
<div class="newsform">
<p>Some text</p>
<form>
<input type="text" name="sname" style="width:353px"/>
<input type="textarea" id="newsgoals" name="newsgoals" ></input><br/>
<input type="submit" value="Add" />
</form>
</div>
I bind the YUI Editor in a Javascript snippet at the bottom of the web page as follows:
<script>
var myNewSEditor = new YAHOO.widget.Editor('newsgoals', {
height: '300px',
width: '440px',
dompath: false,
animate: true,
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS, // + 'html { font-size:130%; }',
// { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
toolbar: {
titlebar: 'Write Your Goals Here',
buttons: [
{ group: 'textstyle', // label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
menu: [
{ text: 'Arial', checked: true },
{ text: 'Arial Black' },
{ text: 'Comic Sans MS' },
{ text: 'Courier New' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
{ text: 'Trebuchet MS' },
{ text: 'Verdana' }
]
},
{ type: 'spin', label: '22', value: 'fontsize', range: [ 9, 75 ], disabled: true },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }
]
}
]
}
});
myNewSEditor.render();
</script>
The everything inside the div (class="newsform") renders the fonts at 120% large except the YUI Editor, which continues to render very small. If I used the web page without the YUI editor, the text area (input#newsgoals) renders properly at 150%.
I was able to configure colours and font sizes in the tool bar of the YUI Editor, but not in the text area box.
I even tried configuring the 'css:" attribute in the toolbar and then adding my CSS rule to _defaultCSS (as per the YUI Editor documents), but it didn't work.
Jay,
Dav Glass, the author of this component, provides great help to his users over at the YUI Library forums: http://yuilibrary.com/forum/
If you don't get an answer here, definitely try posting over there.
-Eric
Woohoo! Thanks Eric Miraglia. The pointer to Dav Glass' forum got me where I needed to go.
For some reason, I had found the css: configuration parameter which was correct, but I had done something else wrong and that caused it to fail. The correct answer is to put the following line where I have the css: when I call "new Yahoo.widget.Editor()" :
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'body { font-size:130%; background-color:red;color:white;}'
That was enough to get the font-size and editor background changed to what I want.