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
Related
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.
I am new to ExtJs ,In this I have a textareafield binding data from API response.
What I want to do is if the response has any url's in it I would like to show a tool tip kind of thing with copy option when user hover on it.Can anyone help me to get this .
code:
xtype: 'textareafield',
fieldLabel: 'Reponse',
name: 'response',
align: 'stretch',
allowBlank: false,
flex: 1
response.setValue(StringUtils.addHtmlBreaks(record.get('response')));
Thanks..
I have created simple fiddle where I have shown one textarea and binded mouse events and shown tip accordingly in this fiddle.
textarea.on('mouseover',function(evt,field){
//Show tip if url matches
},this);
textarea.on('mouseout',function(){
//just hide tip
},this);
and matched url in textarea by text.match(/\bhttps?:\/\/\S+/gi)
In this fiddle I haven't implemented copy thing because I want to confirm if this behavior fits for you. Please check and reply for same, and in case of any edits in code suggest same.
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 a panel defined like so:
Ext.define('E.view.portfolio.Construction', {
extend: 'Ext.form.Panel',
xtype: 'portfolioconstruction',
closable: true,
layout: 'border',
baseCls: 'module-workspace',
// ...
});
Inside that panel, I have an items array. One of the items is another panel. Here is the definition of that panel:
{
region: 'center',
xtype: 'portfoliosettings',
itemId: 'portfolioSettings',
title: 'Portfolio Settings',
collapsible: true,
collapseDirection: 'right',
collapsedCls: 'portfolio-settings-collapsed',
flex: 10,
cls: 'module-section portfolio-settings',
frame: true,
padding: 0,
margin: 0
}
Setting width on this panel has no effect. Setting maxWidth and minWidth causes a lot of extra space to be placed around the panel. Is there any way to use the flex property while still controlling the maximum width of the panel? It's forcing me to make the decision between being oversized at high resolutions (1920 x 1080) or not fitting the content at low resolutions (1024 x 768).
Is there some kind of happy medium or am I stuck with this?
From the ExtJS documentation for the border layout:
Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
So, explicitly setting a maxWidth on the panel has no effect, as it will be resized to fill the remaining space in the container, even if that is larger than the maxWidth.
The solution, then, would be to define your layout using a combination of HBox and VBox layouts rather than a border layout, so that you can use maxWidth, minWidth, and flex configs to get the layout behavior you're looking for.
So for some reason setting the region to center causes extjs to not respect certain size properties. When I set region to 'east' it allowed the component to behave as expected.
Hope this helps someone else.
I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).
If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....
Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.
You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.
See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.
You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.
Ext.create('Ext.panel.Panel', {
title: 'parent container',
width: 800,
height: 600,
layout: 'fit',
items: {
xtype: 'grid',
title: 'child container',
... define your grid here
},
renderTo: 'grand parent container'
});
My thought would be to set autoScroll: true on the panel.Panel that contained the grid.
This seems like an issue with your layout settings as opposed to the object properties.
Try setting the layout property of the parent container to 'fit'- can you also provide a code excerpt?
As Ergo said, this is more likely a layout problem - the GridPanel is probably higher than the panel containing it, high enough not to need a scrollbar but not fully visible, obviously. Put the GridPanel into a container with a proper layout, i.e. border layout, fit layout or card layout. Getting layout managers right is generally one of the hardest part of ExtJS-Fu.
adding
viewConfig = {
scroll:false,
style:{overflow: 'auto',overflowX: 'hidden'}
}
sometimes causes a bug with displaying 2 scrollbars. To prevent it in my case I added a listener. And then works fine.
this.on('scrollershow',function(scroller,orientation,eOpts){
if (orientation=='vertical'){
scroller.hide();
}
},this);