I have designed a tool bar where buttons are there,. My requirement is initially it should display one icon and on mouse over the icon should change. For this i have given a class to the button and applied css for this and for hover property applied cssclass:hover with different image. For Example
.cssclass {
background-image: someimage.jpg
}
.cssclass:hover {
background-image: someotherimage.jpg
}
By this in all browser (chrome and IE) it is working but in Firefox the image is not changing.
Can anybody have any idea how to achieve this?
Thanks
Tapaswini
If this is related to ExtJS 4, then you should be adding a overCls like so:
Ext.create('Ext.Button', {
text: 'Click me',
cls: 'normalcls',
overCls: 'someovercls', // right here!
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Depending on the ExtJS version, it may apply a prefix of 'x-' to the class name.
Related
I am using JSON to receive data and place it into List. There is a Label displaying the text that I am receiving from the JSON. In some of the cases there is a Link in the text. By default you can't click on the Link from the label. Is there a way to make the Link to be clickable?
Label {
text: "Click here to open browser and get redirected to www.stackoverflow.com";
}
The output is "Click here to open browser and get redirected to www.stackoverflow.com" but the Link to StackOverflow is not clickable.
Use TextArea instead of Label and set property editable to false, it would look same as Label.
Don't forget to set inputMode to either Text or Chat.
TextArea {
text: "http://www.google.com"
editable: false
inputMode: TextAreaInputMode.Text
}
You can actually use HTML in the label itself to style the text as a link, according to the Text Styles documentation. You need to be aware of a few quirks though if you are going to apply any of your own styles, as discussed on the Blackberry Developer support forums here. The example below should work, using the default style which will colour the link blue, with bold and underline:
Label {
text: "<html>Click here to open browser and get redirected to <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a></html>"
}
Note: you may need to set multiline: true on the Label in order to see all of the text, depending on your layout.
You should assign Text.RichText value to "textFormat" property of the Label:
import QtQuick 1.1
Rectangle {
width: 360
height: 360
Text {
text: "Click here"
anchors.centerIn: parent
textFormat: Text.RichText
onLinkActivated: {
Qt.openUrlExternally(link)
}
}
}
I have a Window, and when i click on a button i will pop open it (as a pop up). Here's my code and it works fine.
var w= Ext.widget('mywindow');
w.show();
Now, i have a tab bar panel, where when the user clicks the button i need to open it (But, not as a Pop-up). It should occupy the whole screen (Replace the previous view). How should i do this ?
The definition of my tab panel
Ext.define('App.view.TabPanelClass', {
extend: 'Ext.tab.Panel',
alias: 'widget.persontabpanel',
.....
UPDATE
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'firstPanel' }
},....
You can use card layout to replace one view with another. Alternatively you can create a window with maximized:true config.
The normal way to go about this is to put the tabpanel inside of a viewport and give it a layout: 'card' config to cover any other views, a layout: 'fit' config would work better if this is the only view you have in the viewport. Windows aren't children of the ExtJS viewport so a window and a tabpanel would only be one item in the viewport.
A viewport will keep it's contents sized to match the browser window size even when it gets resized. See the docs on viewport here.
I'm trying to build a flashcard app with sencha touch 2.
I have a label showing the question, which takes up the entire screen, I want it so that when the user taps on the label the answer shows.
Does the label have a 'tap' event? It works when I use a button, but not when I use a label.
Another way around is if I can get the button to be transparent on top of a label.
Any suggestions?
You can do this :
label.element.on({
tap : function(e, t) { ... }
});
Hope this helps
one more way to bind the tap event to the 'label' control using sencha touch.
{
xtype : 'label',
html : 'my name is abc',
listeners :
{
element : 'element',
tap : function(e, t)
{
alert('1 pressed');
}
}
}
Ext.Label is not designed to have a tap event. However, you can still achieve it through the tap event on your label HTML element, for example:
label.getContentEl().on{'tap', handler_function,this}
But Sencha Touch does not provide tap event on Ext.Label, which is a child of Ext.Component, so when you try to use tap event on a label, it's not the best practice.
A better approach is to use Ext.Button with the following 2 configs:
{
ui: 'plain',
cls: 'btnCls',
}
and in your CSS, style its background to transparent.
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
I am using sencha to create an application.
In this i am using button which for which i have defined the icons.
ex:
Sencha
{
xtype:'button',
height:30,
width:30,
cls:'btn'
}
CSS
.btn
{
background:"../../resources/img/hosrse.png";
}
But when i am clicking on the button the image is disappearing. What to do to keep the image appear even after pressing the button.
You need to overload the .x-button-pressed rule, i.e.
.btn.x-button.x-button-plain,
.btn.x-button.x-button-plain.x-button-pressed {
background:"../../resources/img/hosrse.png";
}