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".
Related
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
I want to create a button like this to my application.Please someone help me to do this
You can make it by using the <ons-speed-dial> element of Onsen UI: https://tutorial.onsen.io/?framework=vanilla&category=reference&module=speed-dial
If you want your buttons to be scattered like in the Debugger, then after choosing the direction of the <ons-speed-dial>, add a margin to each of the <ons-speed-dial-item> to place them where you want them to be.
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.
I am dabbling fresh with Drupal 7 and so far having little success with getting the Menu to behave the way I want it to. My CSS and PHP basics are strong, but understanding Drupal's system is in itself a huge challenge and hence my doubts.
For those acquainted with the Bartik theme, the main menu defaults itself in the header.
I am trying to create a floating/persistent menu that encapsulates the entire width of the website. But I am not sure where I need to go in and make the required changes.
One option I have is to remove the main menu from the Bartik header and then introduce the main menu block in the 'featured' region. Here the menu is rendering itself horizontally instead of vertically the way i want it to be.
Essentially the question is, How do I alter the main menu in the Bartik theme? Where do I need to get in and make changes.OH, and I have sub-themed it, just to let you know.
Thanks much !
Parijat
I'm not sure I follow but it sounds like you need to create a new region to put the menu in. You add these in the themes .info file.
region[region_name] = Region name
Print the regions contents out in your themes page.tpl.php file.
Clear the cache and it will show up in the blocks page.
You can the style it how ever you want.
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.