I am a new in extjs and I prepared one login form.
I used that form into the Ext.window.Window but when it display on browser its showing separately
var win = new Ext.window.Window({
renderTo: Ext.get('main'),
items: form,
});
win.show();
Try this:
var win = new Ext.window.Window({
renderTo: Ext.getBody(),
items: form,
});
win.show();
Related
So I am new to both Sencha and Javascript. I have been stuck on this for the last couple hours or so. I trying to append a standard HTML5 control to a Sencha ExtJS panel for use within the application. This is the control:
<input type="file" id="files" name="file" />
I found a couple forums that kinda explain how to do it but I am doing something wrong here is what the forums explain:
From the Forums:
Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});
myEl = new Ext.Element(document.createElement('div'));
Ext.Get('par-div').appendChild(myEl);
Here is what I have tried:
Ext.onReady(function ()
{
Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});
var c = Ext.Get('par-div');
//var myEl = new Ext.Element(document.createElement('div'));
//Ext.Get('par-div').appendChild(myEl.dom);
//var mi = document.createElement("input");
//mi.setAttribute('type', 'text');
//mi.setAttribute('value', 'default');
//var myEl = new Ext.Element(mi);
//Ext.Get('par-div').appendChild(myEl);
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [myEl]
});
});
The problem is I have no idea where to add this and how to display it.
Overall I am just trying to take an HTML 5 input control and add it to my Sencha app.
Thanks,
Josh
Update:
cpastore84, Thank you for the reply. So I have a bit of code that pretty much does what you have and works the issue now is that it is putting the input field behind the panel I am trying to place it in:
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 500,
height: 500,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners:
{
render: function( sender, eOpts )
{
var form = document.createElement('form');
var input = document.createElement('input');
input.name = 'parentNode';
input.type = 'file';
form.appendChild(input);
//var myEl = new Ext.Element(form);
var h = document.getElementById(sender.id);
h.appendChild(form);
alert(h);
}
}
});
You can see the input box appear before the panel is rendered on top. I hope this is something simple to fix. Any idea's?
Update 2:
I have also tried grabbing the innerHTML from the element and replacing a dummy with the input. It does technically work but loses all of the original format when you set the innerHTML to the newly modified version. Any idea why it would do that when only changing one line?
Here is a JSFiddle showing an example.
The script itself is simple. Just pass the parent container's id to the append method:
Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'});
You can add the script to the head of your html file like so:
<html>
<head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'});
});
</script>
</head>
<body>
<div id="parent-div"></div>
</body>
</html>
then it will run after the page is loaded.
Update
It's easier to add the field to the panel using the panel's items array rather than try to manipulate the component's DOM directly. Here is an updated JSFiddle showing the relevant items array:
items : [
{
xtype: 'filefield',
name: 'file'
}
]
Update 2
You can render any markup by passing a DomSpec to the component's autoEl config:
{
xtype : 'component',
autoEl: {
tag : 'input',
type: 'file'
}
}
See the updated JSFiddle.
Hey Guys thanks for everyone's support. I was able to figure out how to do this and wanted to post the end all code for everyone. I could not have done it without everyone's help though. I hope this will be of assistance to someone else as well.
var myPanal = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 500,
height: 500,
renderTo: Ext.getBody(),
items:
[
{xtype: 'datefield',fieldLabel: 'Start date'},
{xtype: 'panel', id: 'pnlTest', html: '<input type="file" id="files" width="500" name="file" />'},
{xtype: 'button', width:75, height: 25, text: 'Read', margin: '5 0 0 5', handler:function()
{
var inputFiles = document.getElementById('files');
var file = inputFiles.files[0];
var start = 0;
var stop = file.size - 1;
var reader = new FileReader();
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
alert(evt.target.result);
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}}
]
});
I am creating layout with ExtJs components and need to add widgets dynamically at run time. The code adds three containers to viewport, top, left and center tab panel. The tab panel further contains two tabs (Ex.panel.Panel) and the second tab contains an html Editor.
Code:
Ext.onReady(function () {
var vp = Ext.create("Ext.container.Viewport", {
layout: 'border'
});
var top = Ext.create("Ext.container.Container", {
renderTo: 'top',
height: 70,
region: 'north'
});
var left = Ext.create("Ext.panel.Panel", {
renderTo: 'left',
title: 'Menu',
split: true,
collapsible: true,
width: 270,
region: 'west'
});
var center = Ext.create("Ext.tab.Panel", {
renderTo: 'center',
region: 'center',
});
vp.add(top);
vp.add(left);
vp.add(center);
var tab1 = Ext.create("Ext.panel.Panel", {
renderTo: "tab1",
layout: "fit",
title: "Tab-1"
});
var tab2 = Ext.create("Ext.panel.Panel", {
renderTo: "tab2",
layout: "fit",
title: "Tab-2: Editor"
});
center.add(tab1);
center.add(tab2);
var editor = Ext.create("Ext.form.HtmlEditor", {
renderTo: "editor"
});
tab2.add(editor);
//center.doLayout();
});
The problem is that the editor is not displayed within second tab instead it displays on top. However when I click on second tab then it automatically corrects the layout and display html editor at correct position. But still the html editor does not allow to type.
Furthermore, I have observed that the documentation does not include examples of creating layout at run time, all examples demonstrate design time creation of layouts.
I also tried TabPanel.doLayout() method after adding tabs and html editor but still it does not correct the display issue. Please share if there is any idea on how to add components dynamically in ExtJs.
JS Fiddle
http://jsfiddle.net/uZGxS/
I have found the solution to the tab issues. While adding new tab to tab panel if we set it active then the child components will render correctly. In this case now the html editor layout renders and displays at correct position.
center.add(tab1);
center.setActiveTab(tab1);
center.add(tab2);
center.setActiveTab(tab2);
JSFIDDLE:
http://jsfiddle.net/uZGxS/1/
I have a scenario where I am having my header created using jQuery & that header is being loaded in ExtJS. For the same I am using the below code.
var panel = new Ext.Panel({
autoHeight : true,
html : <Some HTML code containing jquery scripts>
});
But for some unknown reasons my header scripts are not working.
Only HTML is being rendered. Also there is no error long on console.
Any suggestions will be quite helpful.
Try this:
var panel = new Ext.Panel({
autoHeight : true,
html : function(){
return <Some HTML code containing jquery scripts>
}()
});
or
panel.update = <Some HTML code containing jquery scripts>;
See this example
You can add listener as follows and use what ever js or jquery you want,
see example
Ext.onReady(function(){
new Ext.Panel({
renderTo: Ext.getBody(),
frame: true,
title: 'Test panel',
height: 250,
listeners: {
render: function(){
// this.body.dom is the raw dom object of the body element of this panel
// render your plot to this.body.dom
//write js / jquery
console.log(this.body.dom)
this.body.update('This is the new content');
}
}
});
});
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 an Accordion in ExtJS and I want to add new Panels to it dynamically.
The Panels need to be collapsed when they appear.
The code that I have now will create the Panels, but the HTML in each panel won't show.
var loadoutput = new Ext.Panel({
title: 'Log',
renderTo: 'logout',
layout: 'accordion',
defaults: {
bodyStyle: 'padding:10px',
collapsed: true
},
layoutConfig: {
fill: true,
animate: true
}
});
function logOutput(_title, _html) {
temp = new Ext.Panel();
temp.title = _title;
temp.html = _html;
temp.collapsed = true;
loadoutput.items.add(temp);
loadoutput.doLayout();
}
logOutput("Well, that was interesting", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("Hello", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("What?", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
logOutput("Cat", "Dude, what's up? <br/>Hey hey hey<br/>AAAAAH.");
I think the problem is that you are using the "items" add method (it's a Ext.util.MixedCollection) instead of the Ext.Panel add method.
Try this:
loadoutput.add(temp);
So, this code works above. items.add or add both work. One issue is boxMinHeight. Need to set it manually I guess.