YUI().use('node-event-delegate', 'panel', function(Y){
(function createNewMetadataPanel() {
console.log('creating');
var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
var form = Y.Node.create('<form/>');
var set = Y.Node.create('<fieldset/>');
form.append(set);
widget.append(form);
panelContent.append(widget);
var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
set.append(metaDataName);
set.append(metaDataValue);
panel2 = new Y.Panel({
srcNode : '#newMetadataPanelContent',
headerContent: 'Add A New Member',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : false
});
panel2.addButton({
value: 'Create Member',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addMetaData();
}
});
});
When this code runs, the panel appears as soon as the page loads, at the bottom of the screen. It is not even centered. Shouldn't render : false prevent it from being added to the DOM, and visible : false prevent it from being shown?
Give you #newMetadataPanelContent element the CSS property display:none. Y.Panel will un-hide it when you show your panel.
Related
How can I hide the bottom toolbar of agentTypeGridPanel ?
I tried .getDockedComponent('bottomtoolbar').hide() but its not working.
eci.admin.agentType.agentTypePanel = function(attributes){
var agentTypeGridPanel = eci.admin.agentType.agentTypeGrid(attributes);
var fieldsGridPanel = eci.admin.agentType.getFieldsGridPanel(attributes);
var dataPanel = new Ext.Panel({
itemId: 'eciAgentTypeDetails'+eci.admin.agentType.dataTypeId+'-panel',
title : 'Agent Type',
border : false,
//height : 300,
hideHeaders: true,
items : [agentTypeGridPanel, fieldsGridPanel]
});
//eci.admin.agentType.GridPanel.getDockedComponent('bottomtoolbar').hide();
//agentTypeGridPanel.getTopToolbar().hide();
return dataPanel;
};
I think this is what you are looking for.
GridPanel.getDockedItems('toolbar[dock="top/bottom"]').hidden = true;
You need to provide the grid code for further analysis.
I am creating one window in extjs 3. In window I have a panel in which I am including item with afterrender. I place some button on window including cancle. after clicking on window close button or cancel buttonMy app getting stuck. What will be the possible reason.
My Panel Code :
{
xtype: 'panel',
title : "Records",
bodyStyle: 'background: #dfe8f6;border:#dfe8f6;',
id:'AlteredRecord',
region: 'center',
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items:[],
listeners:{
afterrender: function(){
debugger;
var grid = Ext.getCmp('GRID');
var record = grid.getSelectionModel().getSelections();
var actionRecItemsLen = record.length;
var multirfchelper = Ext.getCmp('multirfchelper');
var rec = Ext.getCmp('AlteredRecord');
var recItem = rec.items.items;
var clsName = new Recordrfc(),
for(var i=0;i<actionRecItemsLen; i++){
var sub = record[i].data.USUB;
var clsName = new Recordrfc();
recItem.push(clsName);
this.doLayout();
}
}
},
}
I have tabpanel:
{
xtype: 'tabpanel',
tabPosition: 'top', // it's default value
items: [/*tabs*/]
}
And some button which changes layout:
{
xtype: 'button',
text: 'Change layout',
handler: function (btn) {
var layout = App.helper.Registry.get('layout');
if (layout === this.getCurrentLayout()) {
return;
}
if (layout === 'horizontal') {
newContainer = this.down('container[cls~=split-horizontal]');//hbox laout
oldContainer = this.down('container[cls~=split-vertical]');//vbox layout
tabPanel.tabPosition = 'top';
} else {
newContainer = this.down('container[cls~=split-vertical]');
oldContainer = this.down('container[cls~=split-horizontal]');
tabPanel.tabPosition = 'bottom';
}
oldContainer.remove(somePanel, false);
oldContainer.remove(tabPanel, false);
newContainer.insert(0, somePanel);
newContainer.insert(2, tabPanel);
newContainer.show();
oldContainer.hide();
}
When I change layout, me also need change the position of the tabs.
Of course changing config property tabPosition has no effect.
How i can switch tabPosition dynamically?
I'm afraid in case of tabpanel the only way is to destroy the current panel and recreate it from config object with altered tabPosition setting. You can use cloneConfig() method to get config object from existing panel.
I have a toggle button:
var button = new Ext.Button({
tooltip: "Интенсивность",
iconCls: "gxp-icon-intensity",
enableToggle:true,
toggleHandler: function (button, state) {
if(state){
alert(state)
map.getLayersByName("Интенсивность")[0].setVisibility(true);
intWin.show();
}else{
map.getLayersByName("Интенсивность")[0].setVisibility(false);
alert(intWin.collapsed);
//intWin.close();
}
}
});
And when the button is toggled I show a window:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
When I close my window, then the button un-toggles. But when I click it again I don't get a window. Firebug shows this error:
TypeError: b.dom is undefined
...String(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(b);g.params...
What can be wrong here?
UPDATE
Okey,my bad. I tried to show a destroyed element.
But in this case:
1 When I close the window and is destroyed, any forms in this window will be destroyed too?
2 How can I check that the window is destroyed?
UPDATE2
Now I try this function for creating the window:
function intWinCreate(){
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
and in the button handler:
intWinCreate();
intWin.show();
But I get an error:
ReferenceError: intWin is not defined
If I put intWin.show(); into the function then that window shows.
What can be wrong?
When an element is destroyed everything within it also is destroyed.
In your case you change the default behaviour of close action to hide by setting the property closeAction: 'hide' it will cause the window to hide instead of getting destroyed.
Ex:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
closeAction: 'hide',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
Update:
It is because intWin is a local variable in the method intWinCreate. What you can do is to return the window from the method and call show on it.
function intWinCreate(){
return new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
Then
intWinCreate().show()
Yes, form usually is destroyed too
You can check, for example, intWin.body - if it is null - window is destroyed
UPDATE
As i see you have one answear already but I have another one for you too ;)
As long as you set
id: 'intWin'
You can access this window from anywhere using
Ext.getCmp()
so you can show it with this:
Ext.getCmp('intWin').show()
i have downloaded the https://github.com/edspencer/Ext.ux.Printer and
import the Printer.js and Base.js
in Base.Js i added the image rendder code:
Ext.ux.Printer.imageRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
generateBody: function(image) {
return String.format("<div class='image-print'>{0}</div>", image.body.dom.innerHTML);
}
});
Ext.ux.Printer.registerRenderer('image', Ext.ux.Printer.imageRenderer);
this is the place display the image with id displayimage
items: [Printtoolbar,{
xtype : 'image',
id : 'displayimage',
style: {
'display': 'block',
'margin': 'auto'
},
width: 320,
height: 240,
}]
When Pressed Print Button Print The Image
var PrintImgBtn = Ext.getCmp('btnPrint');
PrintImgBtn.on('click', function(){
printImg = Ext.getCmp('displayimage');
Ext.ux.Printer.print(printImg);
Unfortunately when i pressed the print button,nothing happen.
You can just open a window and print it. In your button handler:
...
handler: function() {
var img = Ext.getCmp('displayimage');
if(img) {
var html = img.container.dom.innerHTML;
var win = window.open();
win.document.write(html);
win.print();
win.close();
}
}
...
Example with print: http://jsfiddle.net/wXfFN/3/
if your are using Iframe 'Ext.ux.iFrame', then you can use something like this
var iframe = this.down('iframe');
iframe.getFrame().contentWindow.print();
if you want to add some additional content along with iframe content
var iframe = this.down('iframe');
var contentWindow = iframe.getFrame().contentWindow;
var iFrameNewContent = "<div>This will be helpfull</div>" + contentWindow.document.body.innerHTML;
// set iFrameNewContent to content window
contentWindow.document.body.innerHTML = iFrameNewContent;
contentWindow.print();
Advantage is that all the styles applied to iframe content, you can see in print document
Also check this link whether it comes usefull
https://druckit.wordpress.com/2014/02/15/ext-js-4-printing-the-contents-of-an-ext-panel/