I have some GridPanel. Can I write a plugin which will create Panel with BorderLayout and push my grid to this Panel with region === 'center' and FormPanel with region === 'west', for example? In another words, I want to get my component and completely move it to another.
I believe you are asking to move a component after it has been rendered.
I would recommend setting up your BorderLayout with some more basic containers (or panels if you wish) for each region. Then add your grid and form panels to those containers rather than directly to the BorderLayout Panel.
At that point, you can simply get whichever component you want and .add() or .insert() it to some other container. In extjs 3.2.1, at least, add() and insert() both take care of the entire move. Don't remove() them.
Related
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html
Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.
Note: Please note that I cannot use any third party plugin..
This sample in ExtJs 4.2.1.
One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.
You can see it here: https://fiddle.sencha.com/#fiddle/44c
Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided
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.
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.
I have a viewport with a tab panel in it. I'm trying to create a standard panel dynamically and make it visible. I'm able to create the panel and isVisible() returns true after calling doLayout on the viewport but the panel is not visible on the screen. Is there any way to make it visible (i.e., to hover above the tab panel)?
If you create the panel as a child of the document body and position it absolutely it should show above your existing layout. You could also (more easily) use an Ext.Window to do this.