ExtJS load views dynamically for dashboard widgets

Question

In my ExtJS 4.2.1 Application I have a dashboard screen where Im showing some charts and grids.

I have been requested by my client to allow the user to add custom widget (from a static collection of widgets) so the dashboard will only show the widgets that the user wants to have.

So I have to create the widgets dynamically depending on some JSON that I will send from server when the user logins. But i have no idea how to implement this.

The process that the user will follow will be the following:

1. On my dashboard view I will have 4 panels (table layout).
2. Each panel will have a tool (gear icon).
3. The user clicks on this gear icon and a window will be shown with a list of available widgets he can assign to that panel.
4. The user selects the widget that he wants to add to the selected panel and he pressed the button "Apply".
5. On button clicked event the preferences will be saved on database.
6. The next time the user logins in to the app, the preferences will be loaded into the initial JSON so the widgets can be loaded into each panel.

Does anyone have implemented this kind of approach?

Answer 1

I will try to explain for a single panel then u can extend/use that on multiple panels(may be using tbl layout). Say we have some charts view files already created(for this ref charts tutorial on extjs docs), The charts files should have a config (custom config) through that we will pass the real time/dynamic data requied by the chart.

So For first time we will allow user to select chart/widget options from list we we will create chart/widget on its select event as well as save the name of the widget or any other extra settings provided in that widget along with user details in database.

Next time when user logs in we have to retrieve the widget name etc from db and create a widget dynamically on page laod event and display.

Hope this clarify your understanding.