I have a page where I need to add components in specific order. (render it to a div)
Toolbar
Form
Toolbar
Grid
I have studied the doc and I got confused by all those layouts,containers and panels.
I not sure if I should create first some wrapping component(layout,panel) and then insert the components(form,toolbar,grid) or just create a div for each component ?
I would appreciate an example very much.
It depends on your application. If you are developing a pure (no html at all) extjs application the layout is handled by containers' layout but, if you are mixing html and extjs component, you can handle the layout with your div elements.
From your question it seems you are using html (and div elements) then you can handle it by your self. However, I recomend you create a container (a panel) with a hbox layout and include your componenets as children and let the panel handle the layout.
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
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
In my react app, there's a repeated UI pattern of using a collapsible panel (like an according), where there are several panels/boxes with a title bar. Clicking on the title bar expands/collapses the panel's contents.
Is a Higher Order Components method suitable for such a use case? Something like a withAccordion(Component)?
I need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow:
I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css.
also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.
I have difficulty figuring out how I can achieve this in angular2. Any ideas?
so you want to add html and css or just change the actual template?
If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.
Hope this helps.
Enjoy coding.
You can have two views in one template and switch between them by setting a flat:
<div *ngIf="firstLayout">
<!-- first layout -->
</div>
<div *ngIf="!firstLayout">
<!-- first layout -->
</div>
I am currently using ExtJs 4.2 for developing my web pages. I would like to know whether we can define a template and can reuse the template across the pages..To be little more clear, the page header and footer remains the same across pages and only body component changes.
I mean something similar to tiles in jsp.
My scenario is like this:
I have defined a border layout in which the region="north" contains the header part, region ="south" contains the footer part and region="west" and region="center" have the body content.
All my pages have a similar layout...ie..the content at west/center is only changing across pages...so do we have solution to simplify this without defining the entire layout in all the pages...
Please let me know if further clarifications are required
~Ragesh Ak
I think you will want to use Ext.define, and extend the viewport component, giving it a border layout. See the ExtJS tutorial on creating custom components for how to do that. You will want to give it a border layout, and have static panels/containers/menus/toolbars for you north and south objects.
How you model your content/center and navigation/west components depends on the style of application you are building. If you are following the single page application concept with the Model/Store/View/Controller pattern that ExtJS gives you using Ext.app.Application, then you will want to drop empty containers in those slots since you can't swap out a border layout component. Putting in empty containers will allow you to call the removeAll function and then add your new items when changing views. If you are building a regular site that reloads the page whenever you move between views, you can extend the viewport that you created, and put your content directly into the viewport since it won't ever need to change.
Use define to configure a class that extends container and has the border layout you just described, so you can reuse this new class as you need.