I would like to use a selectlist in a toolbar but have a icon. For example someone wishes to select there radius for a places search around them I want to show an icon then when clicked allow the user to select different options ie (50meters, 1Kilometer, 10Kilometers).
Is there a better way to do this than a selectlist? Is this possioble with a select list in a tool bar? When I try to do it the selectlist shows the first value.
I trying to accomplish this with sencha touch.
You can just create two buttons over there : one with the label and another with the value. Then on both the buttons add one handler to open a floating panel showed by the second button.
Something like this:
{
xtype : 'toolbar',
defaults : {
scope ; this,
handler : showDistanceList,
ui :'plain'
},
items : [{
text : 'Some label',
id : 'label_btn'
}, {
text : '5 km', //default 5 km
id : 'value_btn'
}]
}
function showDistanceList(btn){
var distanceListPanel = new Ext.Panel({
floating : true,
width : 200,
height : 300,
//items : someListComponent
});
distanceListPanel.showBy(btn);
// Set value button value here with the selected list value
// Ext.getCmp('value_btn').setValue('value of item selected from list');
}
For the buttons, you can use any icons or html elements.
Related
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.
How to set the TabPanel Tab Width and Tab Height?
I tried:
var myTabPanel = Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
tabWidth: 300,
//minTabWidth: 300
....
but it doesn't work
It's all that happening inside sencha css files. You need to modify it there.
good news,
I've found the way to do this programatically.
//assuming you are using the MVC structure as suggested
/*In the controller class of your view with the tab panel you must have reference to the tab panel in refs config.
The reference name for this case will be: myTabpanel
*/
//somewhere in the controller class
var tabPanelItems = this.getMyTabpanel().getItems; //get all the items inside the tab panel (if i'm not mistaken this will also return some "extra" item which is not panel
for (var i = 0; i < panels.length; i++) {
//due to that extra item i mentioned, need to make sure current item is a tab by confirming "tab" property existence
if (panels.items[i].tab) {
panels.items[i].setWidth('100px');
panels.items[i].setHeight('25px');
}
}
And that is it.
Key point is that its a Tab-panel (tab with panel) therefore to configure just the tab part we first need to get the tab part otherwise we'll just configuring the panel part by default.
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 a little problem with Dijit.Dialog.
I have some dialogs, which have a small size, and they are displayed in the center of my screen, so it's ok.
But I have also a Dialog with a height of 550px, and it's not displayed in the center of my screen but in the bottom : the browser scroll to the bottom and then displayed it.
I create the dialog simply by:
var dialogLodge = new dijit.Dialog({
id : "dialogLodge",
style : "width:700px;height:550px",
title : "Create lodge",
href : "/lodge/create.html",
preload : true,
draggable : false,
onCancel : function(){
…
},
onLoad : function(){
…
},
});
dialogLodge.startup();
So I don't know why it's not displayed at the center.
If anyone has an idea,
Thanks.
PS : I use Dojo 1.6.1 and I tested it with the 1.7 too
Creating a dialog puts a dom node in your page with css styles that hide it (display:none; visibility:hidden).
In order to make your dialog visible, you should use dialog.show().
You can use dialog.hide() to make it invisible again (and it will remain available in case you want to show it back).
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.