I'm working on Sencha touch 2. I have a tab panel inside which I have many tabs horizontally placed. I want to show the horizontal scroll bar always so that the user will know there are more tabs.
This is my tab panel with tabBar configuration. How can I make the scroll bar indicator visible always?:
Ext.define('Project.view.Result', {
extend: 'Ext.tab.Panel',
id:'searchTab',
tabBar: {
scrollable:'horizontal',
scrollBar:'true',
docked:'top',
layout: {
pack: 'center',
},
},
items:[
{
title: 'A Result',
xtype:'AList'
},
{
title: 'B Result',
xtype:'BList'
},
......
......
{
title: 'Z Result',
xtype:'ZList'
}
]
});
I tried this with css:
#searchTab .x-scroll-indicator[style] {
opacity: 0.5 !important;
}
But then the scroll bar becomes visible for the list items under each tab . But not for the tab bar.
You nearly got it just change your css to this:
.x-tabpanel .x-scroll-indicator {
opacity: 0.5 !important;
}
Hope it helps :)
"New in Touch 2.3.0, each indicator has an autoHide configuration that
allows you to control it. Setting autoHide to false will tell that
indicator not to auto-hide. You can use the indicators config within
the scrollable config on a Container or subclass."
http://www.sencha.com/blog/top-support-tips-march-2014
Ext.application({
name: 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'container',
html: 'The y scroll indicator will always show, x will hide as autoHide defaults to true',
scrollable: {
direction: 'both',
indicators: {
y: {
autoHide: false
}
}
}
});
}
});
https://fiddle.sencha.com/#fiddle/1u9
Related
I have a layout that I need to put side by side.
Th code is in Extjs but I'm trying to style this container when a values gets selected in the combo box. As in the gif:
https://i.stack.imgur.com/dlgKC.gif
The container is moving upwards when any selection is been made. Is there any way in CSS I can control this behavior on select and make sure it stays still and does not move on selection?
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
}]
}); // end of filteritem
}
},
CSS:
.item div.qx-multi-select-combo-wrap{
position: absolute;
left: 320px;
}
Any idea ? Thanks!
Hi i need little help with the scenario i am facing hard to get. i have a horizontal list view of images i want to show only three images on the screen and with center image highlighted.
I tried carousel but only the image highlighted will be scrollable, i want the horizontal kind of smooth scrolling.
Is something like using hbox panel on top of horizontal list view works?
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
}
]
});
can someone help with the scenario how to achieve this.
Any help is much appreciated
You don't need carousel for this. Dataview will serve the purpose. Check out this dude:
Ext.define('Example.view.HorizontalList', {
extend: 'Ext.dataview.DataView',
xtype: 'horizontallist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'xyz'
}
});
You can also check this.
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.
I am using a panel which contains a toolbar with three buttons.
This panel is loaded in 2 diff files.
The first file that its loaded it shows proper gradient effects when the button is pressed or released but the other panel shows no effects at al. The buttons still work but the style is not there.
is it over written by some other file?
my panel is:
config:{
navigationBar: {
hidden:'true'
},
items:[
{
xtype:'toolbar',
layout:'hbox',
height:70,
width:310,
activeItem:2,
items:[
{
xtype:'button',
iconCls:'note_black',
iconAlign:'top',
text:'Workitems',
iconMask:true,
ui:'normal',
id:'workitem',
// enableToggle:true,
enabled:true,
disabled:false,
top:5,
height:60,
handler:function () {
// Ext.getCmp('workitem').setUi('toggle');
// Ext.getCmp('workitem').toggle(true,true);
//Ext.getCmp('workitem').toggle(false,true);
// Ext.getCmp('workitem').setPressed(0);
//Ext.getCmp('workitem').addCls('button_pressed');
}
},
{
xtype:'button',
iconCls:'inbox2',
iconAlign:'top',
text:'Inbox Queue',
iconMask:true,
ui:'normal',
id:'inbox',
top:5,
height:60,
enabled:true,
disabled:false,
left:93,
handler:function () {
}
},
{
xtype:'button',
iconCls:'doc_drawer',
iconAlign:'top',
text:'File Cabinet',
enabled:true,
disabled:false,
iconMask:true,
ui:'normal',
id:'filecabinet',
top:5,
height:60,
left:200,
handler:function () {
}
}]
}]
}
and m loading it in 2 diff files with the same code that says
{
xtype:'bottomBarPanel'
},
Thanks in advance.
It was because i was trying to use the same panel in 2 different places. Appartently you cant do that. So i created separate panels for the 2 files and its working fine now.
I have a extjs button "Order" with menu items 'orderInsuranceMenu' for the button. I need to hide the menu items depeniding on some condition. How can i achive it
orderInsuranceMenu = {
id: 'menu-order-insurance'
,items: [
{
id:'btnMenu1',
text: 'Test Buton1',
iconCls: 'icon-cls',
listeners: {
click: function(b,e){
//some code goes here
}
}
}
,{
id:'btnMenu2',
text: 'Test Buton2',
iconCls: 'icon-first-title',
listeners: {
click: function(b,e){
//Some code here
}
}
}
]
};
Order = new Ext.Button({
text: 'Order '
, iconCls: 'icon-go'
, disabled: true
, menu: orderInsuranceMenu
, handler: function() {
}
});
I have tried this code but it doesnt work:
Ext.getCmp('btnMenu2').hide();
You can achieve this with the method setDisabled for the button. I.e:
Ext.getCmp('btnMenu2').setDisabled(true);
If you want to apply this for all items in your menu you can do this:
Ext.getCmp('menu-order-insurance').items.each(function(item) {
if (item.isXType('button')) {
item.setDisabled(true); // your condition here
}
});
Soloution:
In Extjs 2.2 there is no method to show or hide menu item by using isVisible
So after lot of digging and checking in firebug the final soloution I found was to hide or show the specific item as shown below
extManager.orderInsuranceMenu.items.items[1].hide();
orderInsuranceMenu.items.items[1].show();
You can use the setVisible method available in 2.2, in menu items. http://i.stack.imgur.com/kdw7f.png
If for some reason that does not work, I would resort to removing the item from the menu, and then adding it back into the menu when it is needed.