Carousel is part of Sencha Touch, however:
I'm looking for an example of a carousel/scroller type widget that allows me to horizontally slide through a collection of items that I can act on. Does ExtJS provide such a widget, or the components to build one?
You can slide horizontally through a Ext.carousel.Carousel when you set the direction config to 'horizontal' (default).
Edit:
You can copy the Carousel.js from the sencha touch build and create your own Carousel in ExtJs4.
Rename and refactor some of the configurations and you are good to go.
Refactor example:
Ext.define('Ext.carousel.Carousel', {
extend: 'Ext.Container',
must be
extend: 'Ext.container.Container' ,
[Source]
I hope this works for you.. I'm pretty sure it will but if it doesnt let me know.
Related
I want to create steps or tracking bar in Sencha ExtJS Classic as the following images
what is the best way to implement this in ExtJS Classic?
each step have to be clickable
You can start with:
#example: https://fiddle.sencha.com/#view/editor&fiddle/274i
Or you start your own like this:
xtype: breadcrumb
example: https://fiddle.sencha.com/#view/editor&fiddle/31vu
Other than that you can also start with the segmentedbutton and use css ::after to add the colored line.
In the past I did this one time and it turned out to be a lot of work. We used layout: 'hbox' and used buttons.
The main problem was to add the logic to allow step back still keeping information, add logic after each step separately and make this a full "wizzard-component".
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I try to use CodeMirror in a TabPanel.
http://jsfiddle.net/2dv2z/6/
I have 2 problems which block me:
It's not possible to change the tab
The CodeMirror Element does not really fit his container...
Has anyone some ideas ?
I have developed an extjs component for codemirror. Have a look here http://www.mzsolutions.eu/extjs/#!/api/Ext.ux.form.field.CodeMirror
Cheers
I have a multiselect component in Ext js 3. I have a number of entries in it. Now i want to select an entry and scroll multiselect to make it visible to the user. I am able to select an entry but i cannot scroll multiselect.
I have used dataview component and i do this same function using following:
dataviewObj.container.dom.scrollTop = (42 * index);
but cannot implement this is multiselect.
Can someone please tell me how to achieve this with multiselect????
Thank you a lot for help.
There is no need to edit the Ext extension code itself.
Ext MultiSelect will do scrolling out of the box. You just need to make sure you have added the CSS that it needs:
.ux-mselect{
overflow:auto;
background:white;
position:relative; /* for calculating scroll offsets */
zoom:1;
overflow:auto;
}
The full set of CSS rules to include in your document is here:
http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css
Ok, after a lot of hacking I think I've found the solution to this.
Open the Multiselect.js file in an editor.
Goto the onRender method of the Ext.ux.form.MultiSelect class (object).
Find the FieldSet creation block of code (var fs ...)
Add autoScroll:true to the fieldset config options.
I had a multiselect with ~200 items in it and this worked like a charm.
This is a change made to the extension code itself, so if you can't afford to do this you'll have to find a work around -- possibly through multiple extending and polymorphism.