How can i Render several image in div EXTJS?
I'm trying to use an Ext.container.Container but i only can show one at a time.
Example on at the bottom:
Example webpage at sencha.com
You can put your images in items array of container, so they will be displayed inside the container. define flex: 1 in defaults so that it will be applied to every member of items array and in layout you'll need type: 'hbox' to sort them horizontally. You can also shrink the width by help of width property.Here's the FIDDLE (It may not show images on load, so click Run for reloading)
Related
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen
fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.
I have multiple forms and want to use one Window class to view them. Now it happens that all forms have a different size and I don't want to manage all of them so I thought about the 'fit' layout along with a min/max wight/height for the Window.
But that would be to easy, if I have applied dockedItems the layout messed up along with error that the layout failed. Whatever this error is supposed to tell me... But OK I googled and found out that I need to define a height and a width to make this error go away along with a new special property called: shrinkWrapDock which should tell the layout to depend on the size of content.
So again my Question
Which Layout would I take when I want to auto fit a form in a window while the window has a max-/min-size?
Edit
It don't has to be strictly a form, it is just Ext.window.Window configured with a 'fit' layout which should maintain a min / max size for itself. So a very small item within the window may have unused space while a very large one get scrolbars. All in between the min/max of the window are scalled exactly.
e.g.
// lets say we have a window configured like this
{
xtype:'window',
minHeight: 50,
maxHeight: 500,
layout: 'fit'
}
To small form -> adding a form with just one textfield.
Window uses minHeight: 50 because one field has only a height of ~40 px
Fit within min/max -> adding a form with 6 textfields.
Windows scales to size required by the form ~ 240px
To height form -> adding a form with 20 textfields
Window uses maxHeight: 500 because 20 field has a height of ~800 px
Use a panel inside window(which has fix max,min ht wdt) as parent container, use flex property for it items i.e your multiple forms
eg :
{
xtype:'panel',
itemId:'somePanelId',
layout :'fit',
items :[
{
xtype :'form',
flex : 2,
items [{..}]
},
{
xtype :'form',
flex : 3,
items [{..}]
}
}
Try different combinations of flex for each form as per each form's size. While giving flex consider as fix number say '5' here as outof i.e 2/5 size for form1 and 3/5 (three out of 5) space for form2.
I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).
If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....
Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.
You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.
See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.
You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.
Ext.create('Ext.panel.Panel', {
title: 'parent container',
width: 800,
height: 600,
layout: 'fit',
items: {
xtype: 'grid',
title: 'child container',
... define your grid here
},
renderTo: 'grand parent container'
});
My thought would be to set autoScroll: true on the panel.Panel that contained the grid.
This seems like an issue with your layout settings as opposed to the object properties.
Try setting the layout property of the parent container to 'fit'- can you also provide a code excerpt?
As Ergo said, this is more likely a layout problem - the GridPanel is probably higher than the panel containing it, high enough not to need a scrollbar but not fully visible, obviously. Put the GridPanel into a container with a proper layout, i.e. border layout, fit layout or card layout. Getting layout managers right is generally one of the hardest part of ExtJS-Fu.
adding
viewConfig = {
scroll:false,
style:{overflow: 'auto',overflowX: 'hidden'}
}
sometimes causes a bug with displaying 2 scrollbars. To prevent it in my case I added a listener. And then works fine.
this.on('scrollershow',function(scroller,orientation,eOpts){
if (orientation=='vertical'){
scroller.hide();
}
},this);