I have a custom component in ExtJs that is a form field (GridField). It displays a grid as a form field and works as expected. The observations are as follows:
When the form is rendered alone (eg. in a window or the first panel in a card layout, everything shows just fine)
When the form is is not the first panel in a card layout or is hidden the first time it is rendered, the field name shows and the space required is left but the control does not show.
I did some inspection and found out that the custom component is actually rendered but the width of all the html elements (divs, etc) were 0. They all had the style (width:0). My guess is that it is because the form panel was not visible at the time the rendering was done.
In terms of implementation of the control, I am extending Ext.form.field.Base. In initComponent, I simply call this.on('afterrender', this.initControl) to run the custom code for the additional control after render. Here the input field is hidden and the grid is rendered where it is supposed to be.
My questions are
1. How do I force the control to re-render so that the width is no longer 0?
2. If the current implementation is wrong, what is the right way to use a grid or another ext component as a form field?
Have you tried to call the "doLayout" method to make sure that the dimensions are reapplied correctly? Re-rendering is not common in Extjs, usually doLayout does the trick. If it doesn't, there may be something up with your implementation itself.
Related
I am trying to create components following DRY coding principles but I am stuck with a certain use case. I have a requirement to open an expanded view of a component in a dialog box. The component shows JSON records in a list format with pagination. PFB image:
As you can see there is an expand button(top right corner) which expands the component to a dialog box and shows records in a tablular format. PFB image:
Currently I have copied all the functions and template of the base component to the dialog component to make it work but it openly violates DRY principles and also a bad practice. I also need to keep both the components in sync with each other like the filters should be passed to both the components, etc.
How about a shared service? You put your logic there and then the components are controlling how output is displayed.
Or
Parent component controls how the table component displayed in a div with the selector or if it is opened in the dialog via dialog.open(YourTableComponent,...)
I'm working on an angular 2 application, to keep the explication short, I have a navbar on the left, and on the rest of the page, and I will display my content.
Those content will be blocks, as in the attached image, the navbar contains 4 actions (Form, test1, details ...)
The content in the middle will display everything, but when I click on form, form will be shown in the middle, when i click on Details, the details block will be shown in the middle.
The user can scroll down and up to see the blocks.
I saw that in Angular 2 we can user Fragment to precise anchor and what blocks we want to show, but the problem is that there is a bug on the fragment functionality.
At the moment, I have a router-outlet that changes the view depending on the url in the routerLink on each button of the navbar. Should I keep using it if i want to display all the blocks/components on the same page?
Thanks for your help,
here is the screenshot
So in essence, you want a multitude of components, with a menu that doesn't really navigate, but more so has toggle buttons that either display or hide content? What should a page refresh do? Does it matter if you see the same components then? If so, you either have to store state in local storage / session storage / using ngrx... or you have to add the displayed items to the route and resolve those.
Anyhow, in the end you want one component which decides what is displayed, and all the blocks in their own components with their own selectors which you show / hide using *ngIf.
Your html would basically look like this:
<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>
Assume I have a shiny new React component for rendering markdown and ye old legacy static HTML form, where user types text into textarea
Now I want to enhance this form a little: I want to display my React component alongside and render markdown as user types.
So, basically, I need to set component's props from HTML.
Next thing
Assume I have a React component that displays set of pics and lets user to click and mark one as active. It draws a fancy blue border around the active image and everyone are happy.
Now I have ye old HTML form and I want to send selected picture's id to my server.
So, basically, I need to read component's props (or state) and put it in the hidden field of the form
How do I achieve this? I also might have multiple separate components on my page
I have a master gridview where each row can be expanded to show a child gridview.
The master grid loads with all children collapsed.
I do the expanding/contracting of the child grids in javascript so its nice an quick when loaded.
The problem I have is that when the page does a post back (e.g. when the user clicks to sort one of the columns) all the child grids get set back to a collapsed state. I want the expanded/collapsed state to be remembered.
The examples I've found so far all seem to do the expanding/collapsing on the server side.
But this seems really clunky and slow.
I'm thinking of trying to pass the expanaded/collapsed state of each row back to the server using a hidden field in each row of the master grid.
This hidden field would be set/cleared by the same JS routine which does the expanding/collapsing.
This seems like a good way to do it to me, but since I can't find any examples online I'm concerned I'm missing something???
Any reason not to do it using a hidden field?
Yes, track state in a hidden field. AJAX control toolkit does this for it's controls. Hidden field is a common approach. I'd highly recommend it, and that is the reason why you are experiencing this, because client mechanisms have no ability to "remember" preferences on postbacks, but hidden fields bridge that gap nicely.
I am facing some problems when page is posted back partially. I have some radio buttons based on which I am making tr display="" and display="none" by javascript. After that I am adding rows gridview. The gridview contains empltyTemplate and footer to add new rows. But when I add row in grid view, the user control is posted back and hence all the tr becomes displa="none" which is default when page is loaded. I tried to keep gridview in update panel but it not working. Hierarchy of my controls is as below.
Level-1-Master page--->Level-2-master page--->Level 3-.aspx page--->Level 4-user control--->Level-5 -multiple accordians-->Level-6: 1 user control in each accordian..
code is too long to past here.. I tried to keep update panel inside user control(Level 6) but it was not working. After some googling I found that update pane not works if it is inside accrdian. So I tried to keep all accrdian inside update panel but in that case .aspx page is not posted back but all user controls placed inside accrodian are posted back so the selection is set as they are on default load.
I want all selection to retain when the last level user control is posted back.
The situation is quite complex to understand but this is what the things are..How to solve my problem?
Changes made to the DOM from JavaScript are not retained cross-PostBack; the server has no idea what you've done, and therefore has no way to track it.
To solve this, you either need to have your JS code update state on the server side with a Callback or Ajax call -- or perhaps have it update a hidden input field in the form that reflects the state of your tags, and have the server look there and update the rendered HTML accordingly.