I am using tabpanel with card layout. When i open the tab for the first time everything works fine. but when i close (hide) the tab and then reopen it then i can no longer navigate between cards
// Hide tab
tab.hide();
tabpanel.hideTabStripItem(tab);
// Reopen tab
tabpanel.unhideTabStripItem('mytab');
tabpanel.setActiveTab('mytab');
// Panel = objPanel
{
xtype: 'panel',
layout: 'card',
layoutConfig: {
deferredRender: true
},
activeItem: 0,
border: false,
plain: true,
items: [
...
]
}
// Switching between cards
objPanel.getLayout().setActiveItem(0); // or 1
The thing is objPanel.getLayout() gives "card" (string) after reopening the tab instead of an object.
Can anyone suggest any solution for this? Thanks for any help.
I am not sure what causes this problem but when i changed dataview to gridpanel, everything is working fine.
Following is how my layout was - when i wasn't able to reopen a tab:
form panel
displayfield
panel with card layout
dataview 1 - card 0
dataview 2 - card 1
New layout - where i am able to reopen the tab:
form panel
displayfield
panel with card layout
grid - card 0
dataview 2 - card 1
Related
is it possible to show the active/selected element in the screen visible while selected, with the slick slider?
currently, I have a category on the page that has a swipe/slide feature implemented with a slick slider for mobile view
when I select any menu from the last category or any selected, it's not visible when it is active/selected
sharing image for reference:
there are 4 categories page 1 page 2 page 3 page 4 in the page where page 4 is already selected which has a border-button: yellow when it is selected, but as you can see in the reference image it is not visible on the screen, the user needs to slide category to check the selected one
any idea, if this can be done from slick or CSS?
if(jQuery(window).width() < 640) {
jQuery('#category').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
prevArrow: false,
nextArrow: false,
mobileFirst: true
});
}
I am using Fancybox 3 to display a modal iframe. Here is my code to initialize Fancybox:
modal: true,
smallBtn: true,
iframe: {
css: {
width : '900px',
height: '600px'
},
preload: false
}
If I remove modal: true, I am able to see the small button. However the small button does not show up if I set modal: true.
From the docs about modal option:
// Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
modal : false
So, if you set it to true, there is no button displayed as expected.
Some demo demonstrating small close button -
https://codepen.io/anon/pen/jaVyYV?editors=1010
There is a link in the input form to a popup window to pickup subject categories. The popup window (modal) is a long list but it is not scrolling. If I am trying to scroll then the input form is scrolling and not the popup window. The popup window is moving up with the input form. I want the popup window to scroll, so that I can go through the list of 'subject categories' to select. I am trying to modified this open source software code for my local use.
function(resultingHtml){
//retrieve the dialog box
var $Result = $('<div></div>').html(resultingHtml);
var mainDialogDivision = $Result.find('div[id^=aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_]');
$('body').append($(mainDialogDivision[0]));
var vocabularyDialog = $('div#aspect_submission_ControlledVocabularyTransformer_div_vocabulary_dialog_' + vocabularyIdentifier);
vocabularyDialog.dialog({
autoOpen: true,
overflow: scroll,
height: 450,
width: 650,
modal: true,
title: $Result.find('title').html()
});
You should be able to accomplish this using CSS. Adding style overflow:auto to the main modal element should allow you to scroll through all the subject categories.
You don't mention which DSpace theme you are using, so I assume you are using theme Mirage (the default DSpace theme), then adding the following CSS to the style.css file of your theme should solve your scrolling problem:
.ui-dialog.ui-widget.ui-widget-content
{
overflow: auto
}
I have implemented an app in iphone using sencha touch & phone gap.
Implemented split view using following code in index.js in SRC file with two text messages.. as shown bellow figure
Now i need to add a table view on left side root view and a button on right side details view. how?
Thanks in advance
Ext.ns('sink', 'demos', 'Ext.ux');
Ext.ux.UniversalUI = Ext.extend(Ext.Panel,
{
fullscreen: true,
layout: 'hbox',
items:
[
//Root view
{
xtype: 'panel',
html: 'TableView/Rootview goes here ...',
flex: 1
},
//Details view
{
xtype: 'panel',
html: 'Message Detail view goes here ....',
flex: 2
}
]
});
Currently your rootView and detailView are all of xtype: 'panel'. To achieve what you need, you have to modify a little bit to those 2 items:
For the root view, actually it's called GridView, please read this for more details: http://www.sencha.com/forum/showthread.php?150431-Ext.ux.touch.grid
For the detail view, it's simple to create a view with a button, for example (just example, might not exactly be what you need):
{
xtype: 'container',
items: [
{xtype: 'button', text: 'my button'},
{xtype: 'panel', text: 'detail panel'}.
]
}
When using Sencha Touch to create a panel - you can tell the panel to enable a fullscreen property. THe panel will fill the space available by the device.
It seems to have a bug or not deal with a bookmark that has been saved to the home screen - and floats underneath the status bar at the top.
Is there a property or setting to manage this behaviour OR are am I going to have to program the logic to determine how much padding is required dependent on device and orientation ?
Example below will fit nicely in mobile Safari, but if you save to Home Screen and load it up - the Toolbar sits underneath the Status Bar.
var buttons = [
{text: 'Button'},
{xtype: 'spacer'},
{text: 'Blue', ui: 'action'},
];
var toolbar1 = new Ext.Toolbar({
dock: 'top',
title: 'Panel',
items: buttons
});
var windowHeight = Ext.Element.getViewportHeight();
var windowWidth = Ext.Element.getViewportWidth();
var homePage = new Ext.Panel ({
fullscreen: true,
cls: 'homePage',
dockedItems: [toolbar1],
layout: 'fit',
html: '<h2>Testing Ext.js Panel</h2><p>Height:' + windowHeight +'</p><p> Width:' + windowWidth +'</p>',
animation: 'slide'
});
Thanks in advance.
Hi Ket — This is actually the default behavior... The status bar is always visible, even in a fullscreen web app. There are three tips you may find useful:
You can use a translucent statusbar, which is still there but will overlay your content. To do this, in Ext.setup(), you can use "statusBarStyle: 'black-translucent'"
"window.navigator.standalone" will detect whether you're in fullscreen mode or not.
Instead of measuring window width/height, you could break your H2 and P into separate components, and give the P area a layout of 'fit'
Hope that helps-