I have a window and a dataview inside it-
if (!win) {
var dataview = new Ext.DataView({
});
var win = new Ext.Window({
...
...
items: dataview
});
this.win=win;
}
var dview = this.win.items.itemAt(0);
dview.title = 'My view';
this.win.show();
However, the title do not display at first when window is shown but displays in second run. I am thinking of reloading window before showing. Any help?
Within items u can use:
xtype: 'dataview',
title: '',
Ext.define('PowerTrainCopy', {
extend: 'Ext.Window',
id: 'copyPTWin',
height:450,
width: 1110,
modal:true,
title: 'Copy Powertrain',
//plain: true,
border: true,
resizable: true,
draggable: true,
closable: true,
buttonAlign: 'center',
items: []
});
copyPTWin = Ext.create('PowerTrainCopy');
copyPTWin.show();
Related
I want to open a new window on click of button. On cclick on button window is opening and closing fine but second time it is not closing properly.
Here is my code
var formPanel = new Ext.FormPanel({
height: 125,
autoScroll: true,
id: 'formpanel',
defaultType: 'field',
frame: true,
title: 'CheckOut from SVN',
items: [{
fieldLabel: 'SVN Path'
}],
buttons: [{
text: 'Submit',
minWidth: 75,
handler: function() {
var urlTemp = './Export?' + '&' + fp.getForm().getValues(true);
formPanel.getForm().submit({
url: urlTemp,
method: 'Post',
success: successFn1,
timeout: 18000000,
failure: otherFn
});
}
}, {
text: 'Reset',
minWidth: 75,
handler: function() {
formPanel.getForm().reset();
}
}]
});
function buildWindow() {
var win = new Ext.Window({
id: 'newWindow',
layout: 'fit',
width: 300,
height: 200,
closeAction: 'hide',
plain: true,
stateful: false,
items: [formPanel]
});
win.show();
}
var extSVN = new Ext.Button({
text: 'Checkout from SVN',
minWidth: 75,
handler: function() {
buildWindow();
}
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
items: [extSVN]
});
you are using closeAction: 'hide' on your window which mean that when you close it it will not be destroyed but hidden.
The problem is that when you reopen the window you create a new one so your formPanel ends up in 2 different windows which causes the error.
You can :
remove the closeAction: 'hide', but your formPanel will also be
destroy when you close the window, so you'll have to recreate
another too
or keep the closeAction: 'hide' and only create the
windows one time
You have provided id to your form and window. And inside window you have set config closeAction: 'hide' that means whenever your press close button window is hiding.
And on again on-click of Checkout from SVN button you creating a same window and form with same id's so instead of creating of new window you can use previous window and show again.
In this FIDDLE, I have created a demo using your code and put some modifications.
CODE SNIPPET
Ext.onReady(function () {
var formPanel = new Ext.FormPanel({
height: 125,
autoScroll: true,
id: 'formpanel',
defaultType: 'field',
frame: true,
title: 'CheckOut from SVN',
items: [{
fieldLabel: 'SVN Path'
}],
buttons: [{
text: 'Submit',
minWidth: 75,
handler: function () {
var urlTemp = './Export?' + '&' + fp.getForm().getValues(true);
formPanel.getForm().submit({
url: urlTemp,
method: 'Post',
success: successFn1,
timeout: 18000000,
failure: otherFn
});
}
}, {
text: 'Reset',
minWidth: 75,
handler: function () {
formPanel.getForm().reset();
}
}]
});
function buildWindow(btn) {
if (!btn.win) {
btn.win = new Ext.Window({
layout: 'fit',
id: 'newWindow',
modal: true,
width: 300,
height: 200,
closeAction: 'hide',
plain: true,
stateful: false,
items: [formPanel]
});
}
btn.win.show();
}
var extSVN = new Ext.Button({
text: 'Checkout from SVN',
minWidth: 75,
handler: buildWindow
});
new Ext.Panel({
title: 'SVN Chekcout',
renderTo: Ext.getBody(),
width: 200,
height: 130,
items: [extSVN],
renderTo: Ext.getBody()
});
});
I have a new ExtJS 6 application and Im trying to populate an accordion menu.
Note: This same code works perfect in ExtJS 4.2.
This is the accordion component:
Ext.define('MyApp.view.menu.Accordion', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainmenu',
width: 350,
split: true,
layout: {
type: 'accordion',
autoScroll: true,
autoHeight: true,
titleCollapse: false,
animate: false,
activeOntop: true
},
collapsible: true,
floatable: false,
hideCollapseTool: false,
title: 'Menú',
});
Now, I have in my ViewController a store that I load, this is the code:
var menuPanel = Ext.ComponentQuery.query('mainmenu')[0];
storeMenu.load({
callback: function(records, op, success) {
menuPanel.removeAll();
Ext.each(records, function(rec) {
var title = rec.data.title;
var menu = Ext.create({
xtype: 'treepanel',
rootVisible: false,
title: 'This is a test'
});
menuPanel.add(menu);
});
menuPanel.updateLayout();
}
});
My store records count = 7, so I should see 7 items added to my menu, but this is what I get:
If I again do the same but adding a breakpoint in my debuggin console (image below)
Then my result is the following:
The issue is breaking my head and is really very strange, it works if I debugg adding a breakpoint in order it to work.
Any clue on this issue?
Try adding them in one call:
storeMenu.load({
callback: function(records, op, success) {
var panels;
Ext.suspendLayouts();
menuPanel.removeAll();
panels = Ext.Array.map(records, function(rec){
var title = rec.get('title');
return {
xtype: 'treepanel',
rootVisible: false,
title: title
};
});
menuPanel.add(panels);
Ext.resumeLayouts(true);
}
});
I have an item inside a container in my Viewport, I want to copy that item to a new window: What I've tried copies the item to the new window but unfortunately it destroys it in the container.
How can I keep it in both places ?
onOpenNewClick: function () {
var win;
var viewport = this.getMyViewport();
var chart = viewport.down('container #thechart');
win = Ext.create('widget.window', {
title: 'Layout Window',
width: 1000,
height: 600,
constrain: true,
constrainHeader: true,
hidden: false,
shadow: false,
maximizable: true,
autoScroll: true,
title: 'test',
layout: 'fit',
items: [{
region: 'center',
layout: 'fit',
title: 'chart',
xtype: chart
}]
});
win.show()
win.center();
},
My viewport :
items: [{
region : 'center',
height : '100%',
items : [{
xtype : 'container',
id : 'pan_chart',
border : false,
autoHeight : true,
hidden : true,
autoScroll : true,
items : [{
width : screen.width,
xtype: 'mychart',
id : 'thechart',
}]
}]
}
]
You need to clone the object instead of copying. Because when you copy you copy the reference and not creating a new instance of the object.
This thread discusses cloning of ExtJs objects.
Edit:
You are getting an extjs object and store it in the chart variable. In the second part you are trying to assign the object to the xtype property.
You should directly add it to the items property like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [chart]
});
But this still "cut" your object and not "copy" it.
Edit2:
A good way for component copying is creating a function that return an instance of a chart. You can use the same store with the same data.
function createChart(store){
return Ext.create('Ext.chart.Chart', {
width: 400,
height: 300,
store: store
});
}
use it like so:
win = Ext.create('widget.window', {
title: 'Layout Window',
layout: 'fit',
items: [createChart(myStore)]//myStore must be defined
});
I use extjs4.1 with geoext2 in my web app.
I want to load mapPanel to tabPanel via ajax and it fill tabPanel height and width.
If i set mapPanel height and width i can see it in tabPanel but it can't fill tabPanel because i set it height and width.Following code:
mapPanel = Ext.create("GeoExt.panel.Map", {
renderTo: "mappanel",
height: 575,
width: 1124,
map:map,
zoom: 11,
tbar : toolbar
});
var tabs = Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
title: 'History',
autoScroll: true
}, {
title: 'Center Panel',
autoScroll: true
}]
});
I insert MapPanel to tabPanel when user click on grid column that has icon via following code.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 20,
items: [{
icon : '<?php echo Yii::app()->baseUrl.'/images/icons/show.png';?>',
tooltip: 'Show Map',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
var jsonData = Ext.encode(store.proxy.reader.jsonData);
tabs.remove(tabs.getComponent(2));
tabs.insert(2,{
title:'Map',
layout: 'fit',
loader: {
scripts: true,
autoLoad :true,
params:{
history:jsonData,
index:rowIndex
},
failure : function(){
alert('failed');
},
url: '<?php echo Yii::app()->createUrl('MapWidget/HistoryMap');?>'
}
});
tabs.setActiveTab(2);
tabs.doLayout();
}
}]
},
...
But when i clean height and width in mapPanel options i can't see it in tabPanel!
How can i load mapPanel to tabPanel to fill it's content?
From the docs
Do not use this option if the Component is to be a child item of a
Container. It is the responsibility of the Container's layout manager
to render and manage its child items.
Here's some example code for loading components remotely in the correct way: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/component-loader/component-loader.html
I have a border layout with a grid and a panel, the grid is in 'center', the panel is in 'south'.
The handle to resize the regions appears to work, but upon releasing the mouse, no change occurs, and the panels remain where they are.
var content = new Ext.grid.GridPanel({
id: 'bug-grid',
border: false,
view: new Ext.grid.GroupingView(),
region: 'center',
plugins: [filters],
store: bugStore,
colModel: columnModel,
trackMouseOver:false,
loadMask: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
listeners: {
rowclick: {
fn: function(grid, rowIndex, event) {
var bug_id = grid.store.getAt(rowIndex).id;
Ext.getCmp('activity-panel').load(activity_lines_path(bug_id));
}
}
},
bbar: new Ext.PagingToolbar({
plugins: [filters],
pageSize: pageSize,
store: bugStore,
displayInfo: true,
displayMsg: 'Displaying bugs {0} - {1} of {2}',
emptyMsg: "No bugs to display"
})
});
var activity = new Ext.Panel({
id: 'activity-wrapper-panel',
region: 'south',
items: getActivityPanel(),
autoHeight: true,
bodyBorder: false,
border: false
});
var page = new Ext.Panel({
id: 'page',
layout: 'border',
defaults: {
split: true,
frame: true
},
items: [content, activity],
renderTo: 'application',
height: 800
});
I had autoHeight: true set, where they shouldn't have been. Removing that fixed the issue.