I'm currently working on a project where we recieved all our icons in 1 sprite file. I have never ever used sprites (and i'm pretty new to extjs)
I cannot find a decent example of how to transform the following code (which uses 1 upload.png) into using a spritefile (icons.png)
{
xtype: 'actioncolumn',
cls: 'tasks-icon-column-header tasks-upload-column-header',
width: 24,
icon: 'images/upload.png',
iconCls: 'x-hidden',
tooltip: 'Upload',
menuDisabled: true,
sortable: false
handler: Ext.bind(me.handleUploadClick, me)
}
You need to define class in your css file and define the background image and position of your icon in sprite. For example, if you have icons like this, do something like below to define your class and show only google icon:
.google_icon {
background:url(http://start.ubuntu.com/12.04/sprite.png) -10px -310px;
height:38px;
}
and use this class in your code like this:
iconCls: 'google_icon',
you also need to remove this line:
icon: 'images/upload.png'
I hope it helps!
Related
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I have a repeater In which I am displaying different values.On click of each row I want to display few values.But in the enyo example the content of the popup is popup.....
This content I want to change.I have tried as below
I have the popup-
{name: "basicPopup", kind: "enyo.Popup", floating: true, centered: true,
style: "background-color: yellow; padding: 10px", onHide: "popupHidden", components: [
{content: "Popup..."}
]
},
the mathod i used on tap of each row is
tapped: function(inSender, inEvent) {
alert(inSender.getContent())
this.$.basicPopup.setValue(inSender.getContent());
this.$.basicPopup.show();
},
But by this the vale of the popup is not changing.I want to change the value.Please help.
What you need to do is setContent() on the component inside the Popup OR destroyClientControls() on the Popup and then createComponents() to add what you want in there.
To do it the first way, you want to provide a name for that component, something like:
{name: "popupContent", content: "Popup..."}
and then use this.$.popupContent.setContent("foo");
I have a button. and i need to align it to the right, make the font size increase and bold etc. When i googled it says i should use CSS.
How can i use CSS, to style the button that i added ?
My Question :
Where should i add the CSS file in my application, and how can i use it to style the button ?
items: [
{
xtype: 'button',
align: 'right',
text:'Assign'
}
]
items: [
{
xtype: 'button',
align: 'right',
text:'Assign',
cls : 'foo'
}
]
And in a CSS file:
.foo { background:black; }
This adds a CSS class to the outer most element of the Button. There may be many elements involved in the DOM markup, so use Firebug to figure out which elements you want to style.
More details in Ext docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-cls
I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.
You might want to have a look at this nice tutorial:
Add action buttons to floating sencha touch panels
the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.
Hope this helps.
There's no built-in config which meets your need, so you have to do it manually.
Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.
Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox
var box = Ext.create('Ext.MessageBox',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();
Hope it helps.