I have two windows i.e Chat window and feedback window, I want to show them side by side on button click, for eg if chat is open and user clicks on feedback button then it must tile horizontally. Here's what i have tried so far
var tiledWindows = Ext.create({
xtype: 'container',
autoHeight: true,
autoWidth: true,
frame: true,
//layout: { type: 'hbox', align: 'stretch', pack: 'end' },
layout:'column',
items: [win, chatWindow]
});
the win and chatWindow both have their unique styles. Please help me go about it
Do you need two seperate Windows or would it be enough to have two Panels inside of a window?
In the first scenario you could just create a simple window and align
panels using hbox.
Here is a working sencha fiddle example: sencha fiddle
I also added code to "simulate" the ability to show/hide the feedback panel.
To do what you want you would need to know the position of one window so the other could be positioned next to it. Then use showAt method to position second window or use showAt method to position both windows.
showAt
What I have done in the past with a window that is already rendered is this:
let firstWin = Ext.create('window').show();
let secondWin = Ext.create('window');
secondWin.showAt(firstWin.getX() + firstWin.getWidth(), firstWin.getY());
Note that this code is not functional but should give you an idea of how you could solve your problem using showAt method.
Related
I am working on an application which uses ExtJS4 for the front-end. Right now, I am using a border layout for the home page of my application. I will describe the components in my border layout here:
north: It has a header and a toolbar/menu below it.
west: It has a tree panel.
center: It has tab panels.
Now, my question is related to the header...the header consists of the application logo and application name on the left side and buttons/icons displaying the user name,log out,help,etc on the right side. Also, the menu below it, will display buttons based on the privileges that the current user has!
********* The requirement for the header in the home page of my application is exactly the same as the header of the Sencha homepage http://www.sencha.com/products/extjs/, wherein
the first row has the Sencha logo and the name Sencha to the left. And to the right, I have my user name,log out,etc.
the second row is a toolbar/menu with various options in it.
Now,here are my questions:
Should I should use an image for the header, if I can use an image then Will I be able to place the icons on that image.?
Should I use a toolbar wherein I can place the logo and name to the left, then use a tbfill and place the icons to the end.?
If this is not the right approach to create the header for the home page, Can someone please guide me on any other better approach to this..
Thanks in advance
Maybe try starting with a plain old container with an hbox layout. It can have two items: the first (left) item can be the image and the second (right) can be another container (or even a toolbar) that manages the buttons/links/whatever.
The benefit of this is that you can control each section (right and left) independently in terms of content, widths, etc.
I'd encourage you to look at the source for the kitchen sink site. This is pretty much what they're doing...
Ext.define("KitchenSink.view.Header", {
extend: "Ext.Container",
title: "Ext JS Kitchen Sink",
height: 52,
layout: {
type: "hbox",
align: "middle"
},
initComponent: function() {
...
this.items = [
{xtype: "component",id: "app-header-logo"},
{xtype: "component",id: "app-header-title",html: this.title,flex: 1}
];
if (!Ext.getCmp("options-toolbar")) {
this.items.push({xtype: "themeSwitcher"})
}
this.callParent();
}
});
I have a custom field component based on Ext.form.field.Base. I got the big idea from this post. But what's bothering me with this solution is the fact, that it has a fixed height. What I would like to have instead is that the container grows in height as I add entries to the grid.
I have made an earlier attempt to make such a field but based on a Panel containing the grid and buttons. Putting this panel into a vbox layout and adding rows to the grid perfectly resized the container form panel. What did I miss to implement that the container would resize?
Here is a fiddle where you should easily see what I mean:
http://jsfiddle.net/amx9j/
I finally got it working!
See this fiddle here: http://jsfiddle.net/amx9j/3/
This configuration for the form worked:
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'anchor',
items: [{
//custom fields that change their height
}]
And in the custom field you have to use this.updateLayout() everytime you expect the height to change. In addition I had to implement the onResize method:
onResize: function(w, h) {
this.callParent(arguments);
this.grid.setWidth(w - this.getLabelWidth());
}
Important thing is, to NOT set the height of the grid ;-)
Thanks #Peter for taking the time to look into this!
I have read a few articles similar to this:
http://www.codeslower.com/2011/7/Using-the-draggable-property-in-ExtJS
http://docs.sencha.com/extjs/4.2.0/#!/guide/drag_and_drop
I have a simple panel:
var panel = Ext.create('Ext.panel.Panel', {
draggable: true,
title: 'Panel',
html: 'Show work orders'
});
It allows me to drag around the container panel - even outside the container panel - but dropping constrains the element to the container.
I need a custom proxy to show the drop target location and size - not just a phantom image of the original panel. Can someone show me some simple code on how I might do this? I instantiate Ext.dd.DragSource and provide custom implementations. But for the life of me I cannot figure out how to get started?
Sample code, articles, tutorials much appreciated :)
Alex
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I have one window in that I passed two dynamic gridpanel
1) FeaturGrid
2) gvpropertywn.
I want to refresh testWin (Window) how i can?
can u pls help me?
var testWin = new Ext.Window({
id: 'resultwindow',
title: LangVarTestWinText,
width: 400,
height: 300,
layout: 'border',
closeAction: 'hide',
closable: true,
//items:[FeaturGrid]
items: [FeaturGrid, gvpropertywn]
});
Have you tried the doLayout() - I don't know if it will refresh the contents of the window, but it will redo the layout.
But my guess is that you might want to take a different approach to update the contents of your window. Please give more details to allow us to give you a better advice.
As far as i can see both items are existant after rendering the window by your config
items:[FeaturGrid,gvpropertywn]
what exactly do you want to do ? if you remove any of the items in the window be sure you dont remove the one with region: 'center' defined otherwise when calling
doLayout()
the border layout will crash. if you add a new component and it doesnt popp up call
doLayout()
again