How can I have toggle star-shaped button in Extjs, so when the state is 'pressed' it appears like a filled star, and otherwise like an outlined star?
For example, like the star that appears in Google chrome address bar to bookmark the page:
and when it is clicked it changes it appearance to
or it could be a heart that changes to
Or in gmail
For this you can use viewmodel binding to iconCls. Each button has the config: enableToggle: true and it will publishe its pressed-state to the parent-viewModel. Use the bind expression of iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}' to make it work.
(also integrated FontAwesome5)
Here is the Link to a Sencha-Fiddle
The code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
layout: 'vbox',
viewModel: {}, // <-- important
items: [{
xtype: 'button',
text: 'Bookmark',
enableToggle: true,
bind: {
iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}',
},
reference: 'theButton',
handler: function (button) {
if (button.pressed) {
Ext.toast({
html: 'pressed state',
title: 'The button was clicked...',
width: 250,
align: 't'
});
} else {
Ext.toast({
html: 'unpressed state',
title: 'The button was clicked...',
width: 250,
align: 't'
});
};
}
}]
});
}
});
For panel header:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Sample Panel',
tools: [{
glyph: 'xf005#FontAwesome',
pressed: false,
callback: function () {
if (this.pressed) {
this.setGlyph('xf005#FontAwesome'); // star
} else {
this.setGlyph('xf006#FontAwesome'); // star-o
}
this.pressed = !this.pressed;
}
}],
renderTo: Ext.getBody()
});
}
});
And the font awesome style for index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Related
I tried to close parent window in extjs with this.up().close(), but this.$className is undefined.
I am looking for a solution without using Ext.getCmp.
https://fiddle.sencha.com/#view/editor&fiddle/3b4i
Your scope is wrong. You give your element the scope of the application which is the reason why this.up() won't work. If you remove scope: this you should be able to use this.up() to get the parent container.
I made a fork of your sencha fiddle with a working example:
Sencha fiddle example
Not sure what you want to hide, anyway:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'my Panel',
html: "Some text.",
width: 350
}, {
xtype: 'box',
html: ' Close window',
listeners: {
render: function () {
this.getEl().on('click', function () {
//this.up('container').hide(); // Hide wrapper container
this.previousSibling().hide(); // Hide previous Panel
}, this);
}
}
}]
});
}
});
Is it possible to change the color of buttons of Alert (Ok, Cancel) in Ionic2? Can we use cssClass property to give color to buttons?
.buttonCss{
button{
color:#e74c3c !important;
}
}
The above code gives the same color to the both Ok and Cancel buttons like the below image
But I need to get the following result(Both button shoulb in in different color),
Any help is appreciated...!
Edit 1: Added showAlert() function
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
1) First option, just using a class for the alert, and a css style rule for each button
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
And then:
.buttonCss {
button.alert-button:nth-child(1){
color: red;
}
button.alert-button:nth-child(2){
color: green;
}
}
This way the first button (nth-child(1)) will be red and the second button (nth-child(2)) will be green.
2) Second option, using a class for the alert, and adding the cssClass property to each button, in order to use that custom class on each button
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
cssClass: 'exit-button',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
role: 'cancel',
cssClass: 'cancel-button',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
And then:
.buttonCss {
button.alert-button.exit-button{
color: red;
}
button.alert-button.cancel-button{
color: green;
}
}
You need to give each button a class, then when assigning a class to each button, you can change the colour of each individual button. Also you can add hover effects to change the colour on hover as well.
you have options to add custom class for button using cssClass
showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
title: title || "Please Confirm",
message: message,
cssClass:'buttonCss',
buttons: [
{
text: 'Exit',
handler: () => yesHandler(caller)
},
{
text: 'Cancel',
cssClass: 'customClass',
role: 'cancel',
handler: () => noHandler(caller)
}
]
});
alert.present();
}
In Css:
.customClass{
color:#e74c3c !important;
}
Some of my Fullcalendar events have links. The links point to either public webpages, pdf documents or webpages which are restricted access.
I would like to add a class to format the links to add an icon, based on url string.
If the url contains:
"pdf" addclass "fc-pdf"
"restricted" addclass "fc-lock"
I assume it should be with and eventRender... but I'm having trouble find the right syntax. Can someone help me with this?
http://jsfiddle.net/lbriquet/oez9Ltym/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
views: {
listDay: {
buttonText: 'list day'
},
listWeek: {
buttonText: 'list week'
}
},
defaultView: 'listDay',
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
events: [{
title: 'Conference (website)',
start: '2016-09-11',
end: '2016-09-13',
url: "https://www.ted.com/talks"
}, {
title: 'Meeting (download document)',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00',
url: "http://storage.ted.com/tedx/manuals/tedx_speaker_guide.pdf"
}, {
title: 'Lunch',
start: '2016-09-12T12:00:00'
}, {
title: 'Meeting (members only)',
start: '2016-09-12T14:30:00',
url: "http://www.dictionary.com/browse/restricted"
}, {
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
}, {
title: 'Dinner',
start: '2016-09-12T20:00:00'
}],
eventRender: function eventRender(event, element, view) {
}
});
The way I got this to work was by adding a type to the events simply because I think it would be easier than dealing with regex that might not always work. So events don't need a type but they can have a type pdf, restricted or whatever else you need. In eventRender I added the following:
eventRender: function eventRender(event, element, view) {
if(typeof event.type !== 'undefined') {
if(event.type === 'pdf') {
element.addClass('fc-pdf');
} else if(event.type === 'restricted') {
element.addClass('fc-lock');
}
}
}
A check to see if the type is provided or not and then if statements for adding the class based on the type. I also had to make a small change to the css selector, changing a.fc-lock to .fc-lock a to allow it to display properly. Here is the JS Fiddle showing this.
i am click button, when click "ENTER" on keyboard, but i am want processing clicking only when show window ('MyDesktop.Books').But when i am show window, and then close it, when i am click "ENTER", window ('MyDesktop.Books') showing again.
How to do: processing click "ENTER" on keyboard only when show window
Code:
Ext.define('MyDesktop.Books', {
extend: 'MyDesktop.BaseWindow',
id: 'books-win',
title: 'Book',
width: 700,
height: 400,
iconCls: 'small',
layout: 'fit',
items: [
{
xtype: 'bookwrap',
listeners: {
afterrender: function() {
var mapEnterNew = new Ext.KeyMap(document, {
key: 13,
fn: function(e) {
Ext.ComponentQuery.query('bookwrap button[name=createbook]')[0].getEl().dom.click();
}
});
}
}
}
],
});
I think you should either only initialize the window when it's needed for display and remove afterwards, or attach the event in field/form focus and remove it on blur.
I could give a better answer / example if I knew what xtype: "bookwrap" was.
You shouldn't really need to be using getEl().dom.click(), ExtJs can handle all your form submission needs with it's built in components, you can use use refs in your controller to get references to your buttons alot easier.
This code attaches the key event handling on render and removes it again when the window is closed/hidden:
There is also a Fiddle.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Books', {
extend: 'Ext.window.Window',
id: 'books-win',
title: 'Book',
width: 700,
height: 400,
iconCls: 'small',
layout: 'fit',
items: [{
xtype: 'panel',
html: 'test'
}],
listeners: {
beforehide: function() {
this.mapEnterNew.destroy();
},
afterrender: function() {
this.mapEnterNew = new Ext.KeyMap(document, {
key: 13,
fn: function(e) {
console.log(e);
Ext.ComponentQuery.query('bookwrap button[name=createbook]')[0].getEl().dom.click();
}
});
}
}
});
Ext.create('Books').show();
}
});
I'm trying to put an image background to my form panel, it doesn't display anything, I'm using the code in this tutoriel:
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/
here is my login view:
Ext.define('MyApp2.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
config: {
title: 'Login',
cls:'panelBackground',
// bodyStyle:'background-color:#fff;padding: 10px',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
],
listeners: [{
delegate: '#logInButton',
event: 'tap',
fn: 'onLogInButtonTap'
}]
},
onLogInButtonTap: function() {
var me = this,
usernameField = me.down('#userNameTextField'),
passwordField = me.down('#passwordTextField'),
label = me.down('#signInFailedLabel'),
username = usernameField.getValue(),
password = passwordField.getValue();
label.hide();
// Using a delayed task in order to give the hide animation above
// time to finish before executing the next steps.
var task = Ext.create('Ext.util.DelayedTask', function() {
label.setHtml('');
me.fireEvent('signInCommand', me, username, password);
usernameField.setValue('');
passwordField.setValue('');
});
task.delay(500);
},
showSignInFailedMessage: function(message) {
var label = this.down('#signInFailedLabel');
label.setHtml(message);
label.show();
}
});
and my app.css:
.panelBackground
{
background-image: url(http://localhost:8383/MyApp2/resources/images/login.png) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
Ps: I've tried to put it in the index.html, but it seems that nothing is changing, what I'm doing wrong?
The problem is Ext.form.Panel, it renders a scroll container above the background (You can check it in the Chrome Debugger). But i don't know how to disable that.
But when you change it to
Ext.define('MyApp2.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
the code is going to work.
I had a look on the rest of your code, there will be no problem when using a container instead of a form panel.
I am also using same code and tring to set image in background of panel but i am getting blank border on image.
I want to set image in full screen.
Is your images fitted on full screen if yes then please post your code.