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);
}}
]
});
Related
I am using tagfield and after selecting two or three values my curser moving to down. I want my cursor in same line even if a bit of space is there and after type or select any value then it move to down. Can anybody help me how to get this.
I have specify the specific width also.
My Code :
{ xtype: Tagfield,
growMax : 10,
valueField: 'title',
displayField: 'title',
parentGrid : me,
queryMode: 'local',
autoLoadOnValue:true,
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
triggers: {
clear: {
weight: -30,
cls: 'button-cross',
handler: function(){
this.clearValue();
}
}
},
}
Here is my fiddler: TagfieldFiddle.
Step to reproduce :
1. Select three tags.
2. For fourth tag cursor is going to next line. I want cursoer should be in first line.
You have to resize the input field according to the text that has been entered. Since the input field is an Ext.dom.Element, you will have to check that this works in all browsers:
listeners:{
afterrender: function(tagfield) {
var minWidth = 10, // modify here for adjustable text field width
el = Ext.getBody().createChild(),
measurer = new Ext.util.TextMetrics(el);
tagfield.inputEl.setWidth(minWidth);
tagfield.inputEl.on('keyup', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
tagfield.on('change', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
}
}
Try it here: https://fiddle.sencha.com/#view/editor&fiddle/20cb
I have changed the ExtJS version because there seems to be a bug in tag field in ExtJS 6.0 - if you enter through keyboard, the content of the input is not removed after selection.
In my Webix application, I have embedded a codemirror-editor to write JavaScript into it. Is there a way to scroll upto the position of a found and highlighted pattern when I do a search using browser's Ctrl+F or by any other means ?
I came to know about an add-on search/jump-to-line.js from http://codemirror.net/doc/manual.html#addon_search
and also about below way to achieve this(cm is a codemirror reference) :
cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)
However, not quite sure how to use them. I am including the snippet of the code I have written so far below along with its snippet link.
Snippet link : http://webix.com/snippet/7acca905
The code is included below :
webix.codebase = "http://cdn.webix.com/components/codemirror/";
var editor1 = {
id: "editor1",
view: "codemirror-editor",
mode: "javascript",
value: "",
height: 200
};
var editor2 = {
id: "editor2",
view: "codemirror-editor",
mode: "javascript",
value: "",
height: 200
};
var ed1 = {id:"editor1", value: "Editor-I" };
var ed2 = {id:"editor2", value: "Editor-II" };
var op = [ed1, ed2];
var views = {
animate: false,
cells: [
editor1, editor2
]
};
webix.ui({
container: "mydiv",
rows: [
{view: "tabbar",
id: "tabview",
options:op,
multiview:{ keepViews:true }
},
views,
{height: 300},
]
});
The HTML part associated to it :
<script type="text/javascript" src="http://cdn.webix.com/components/codemirror/codemirror.js"></script>
<div id = "mydiv" style="margin-top:30px;"></div>
Any help would be great. Thanks.
You can get codemirror object like
var cm = $$("editor1").getEditor();
Unfortunately, it seems version of code mirror from cdn.webix.com is outdated and doesn't support scrollIntoView API
I have prepared a Sencha-Fiddle example for my problem, which can be stated as follows:
(1) Why is the Ext.ux.IFrame named panel_iframe not showing ASDFG which is inside the passed html config <html><body>ASDFG</body></html>?
The Sencha docs on Ext.ux.IFrame tell me, that such a property exsists. I need to assemble the html dynamically so going with the src config is no option for me, since the client is not allowed to change files on the server.
Just in case the Fiddle is not working:
Ext.application({
name : 'myfiddleexample',
launch : function() {
var panel_iframe = Ext.create('Ext.ux.IFrame', {
//src: 'some/path/some/file.html' /*i know this works*/
html: '<html><body>ASDFG</body></html>' /*why does this not work?*/
});
var panel = Ext.create('Ext.panel.Panel', {
frame:true,
title: 'panel_5',
padding: '1 1 1 1',
margin: '1 1 1 1',
layout: 'fit',
//html: '<html><body>ASDFG</body></html>' /*i know this works, too*/
items: [panel_iframe]
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel],
autoScroll: true,
renderTo : Ext.getBody()
});
}
});
Another question (2):
I wanted to use the IFrame named panel_iframe in order to put some vis.js graph network visualisations in it.`
Is there an alternative approach to this?
Yet another question (3):
Has someone combined ExtJs with vis.js and can provide a SenchaFiddle, which inits a simple graph inside a Ext.ux.IFrame or any other Ext.Component like for example Ext.panel.Panel?
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();
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');
}
}
});
});