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.
Related
I am using react native navigation version 1.1.486 by wix. I am using
topTabs and want different colors for navbar and tapbar, but the
properties I a passing is not working.
I am sharing my code here:-
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{
Promise.all([
Icon.getImageSource("md-map",30),
Icon.getImageSource("ios-share-alt",30),
SimpleIcon.getImageSource("menu",30,'red'),
SimpleIcon.getImageSource("question",30,'black')
]).then(sources =>{
Navigation.startSingleScreenApp({
screen: {
screen: 'prabhuji.CustomPack',
topTabs: [
{
screenId: 'prabhuji.FlowerTabOne',
title:'Tab 1',
icon: sources[1],
},
{
screenId: 'prabhuji.FlowerTabTwo',
icon: sources[0],
title:'Tab 2'
}
],
navigatorButtons: {
leftButtons:[
{
icon:sources[2],
title:"Menu",
id:"SideDrawerToggle"
}
],
rightButtons:[
{
icon:sources[3],
title:"Help",
id:"Help"
}
]
},
},
appStyle: {
tabBarBackgroundColor: '#0f2362',
selectedTabFontSize: 12,
}
});
});
}
export default startTabs;
The effect for this code is:-
Is there any way to use different colors for toptabs and navbar? May
be I am asking a silly question. Apology for that, I am new to react native.
Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.
Here's an example :
appStyle: {
tabBarBackgroundColor: '#0f2362',
tabBarButtonColor: '#ffffff',
tabBarHideShadow: true,
tabBarSelectedButtonColor: '#63d7cc',
tabBarTranslucent: false,
tabFontFamily: 'Avenir-Medium', // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
tabFontSize: 10,
selectedTabFontSize: 12,
},
Another way
1. Disabling persistent styling properties :
appStyle: {
keepStyleAcrossPush: false
}
2. Setting styles dynamically:
this.props.navigator.setStyle({
navBarBackgroundColor: 'blue'
});
I'm having trouble showing a modal with Ember. I've followed the cookbook but when I click the button for the modal, it only shows the overlay and not the modal itself.
Here's my gist: https://gist.github.com/sunocean-sand/e11111cea44274417012
I appreciate your help!
I've got a similar implementation in one of my apps. Try changing your routes/application.js to the code below. I believe your problem is that you're not using Bootstrap's Programmatic API.
export default Ember.Route.extend({
actions: {
openModal: function(modal) {
this.render(modal, {
into: 'application',
outlet: 'modal'
});
return Ember.run.schedule('afterRender', function() {
Ember.$('.modal').modal('show');
});
},
closeModal: function() {
Ember.$('.modal').modal('hide');
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
I have two grids side by side.
The left grid has a list of tags the user can select, and the grid on the right is empty so the user can drag the tags he wants there.
The plugin code for both grids is:
viewConfig: {
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup: 'selectedTags'
})
]
}
So, as I wanted to limit the user to be able to drag only 5 tags, I've added the following code to the grid on the right:
listeners: {
beforedrop: {
fn: function() {
if (grid.getStore().data.items.length > 4) {
dropHandlers.cancelDrop();
}
},
scope: me
}
}
This is working perfectly but what I wanted is to show the NO-DROP icon when the items are dragged over the grid instead of showing the green line as if the action was allowed.
Thanks,
After looking for this solution for a while, I finally figured it out.
You must add two methods to the dropZone in the Target Grid:
notifyOver and onNodeDrop
The solution for my problem would be the code below:
Ext.create('Ext.grid.Panel', {
store: myStore,
columns: [columns],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize',
pluginId : 'dragNdrop',
dropZone:{
notifyOver:function(source, e, data){
var store = this.view.ownerCt.getStore();
return store.getCount()<5?this.dropAllowed:this.dropNotAllowed
},
onNodeDrop:function(targetNode,dragZone,e,data){
var sourceStore = dragZone.view.ownerCt.getStore(),
targetStore = this.view.ownerCt.getStore(),
isDropValid = targetStore.getCount()<5;
if(isDropValid){
sourceStore.remove(data.records[0])
targetStore.add(data.records[0]);
}
return isDropValid;
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Lopes, you can use column renderer in grid where you can check the items count and display appropriate icon. Code snippet for your reference:
gridCheckboxRenderer: function(value, meta, rec, rowInd, colInd, store){
var cssPrefix = Ext.baseCSSPrefix, cls = [cssPrefix + 'grid-checkheader'];
if (condition == false) {
cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
return '<div class="' + cls.join(' ') + '"> </div>';
}
return '<div class="x-grid-row-checker"> </div>';
}
Hope it helps.
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'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