I am very new to sencha and probably do not know how everything you need. I'm trying to extract some contents of an HTML page using ajax. For example, the text in a div with id = "content".
I want to put this content extracted in a panel or container Sencha.
This is the view that I have:
Ext.define("myapp.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
html: FUNCTION_TO_GET_CONTENT .join("")
}
]
}
});
I would like to know if there is any way to get the contents of the HTML page displayed in a panel, but I do not know how. Can someone please help me understand this and how I can best address this?
UPDATE:
Basically what I would like to do is to replicate the result of this JQuery statement:
$("#mylocaldiv").load("sourcePage.html #mainDiv");
and then append the result to the html property in the tab panel.
First, add an alias to your view (make sure it's preceded by widget.
Ext.define("myapp.view.Main", {
extend: 'Ext.tab.Panel',
alias: 'widget.Main',
...
});
Then get your view by doing either:
myView = Ext.Viewport.down('Main');
or
myView = Ext.ComponentQuery.query('Main');
Now you can access your items like so:
myView.items.items
And since your panel is the only item, it will be item zero. You can then use it's setHtml method to append html:
myView.items.items[0].setHtml('your html here');
In terms of loading an html file into the panel, I believe Sencha removed Ext.dom.Element.load(). I would use a simple Ajax request and then append the result into the panel in the success callback. See here: load an html file into a panel
sencha is not a good tool for building large applications, so better to choose another one. I was tried it and it sucks my time and no use at all, the windows panels and many more developed using images not with css. if we build large apps with that we may decline the performance of app.
Related
I don't even know what to call this, i'm very very new with javascript so i'm sure the answer is simple. The situation is this: A javascript script is building a search pane in html using another sites API. The amount of items in the list are undetermined, hence why it's grabbing them with javascript. I'm using Bootstrap Multiselect on one of the option lists that is generated from the API. I've got javascript generating the HTML correctly (option tags nested in a select tag, with a div wrapper around them) But now I need to put in the call script. in html this is done with:
`<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect();
});
</script>`
but since i'm building the elements with javascript, how do i do this? is it easier? more complicated. Like I said i'm a newbie at this so i'm at a complete loss.
Here's the chunk of code that generates the multiselect list. I don't fully understand the whole script that pulls the API data, but I rewrote this chunk and it seems to work.
function renderCheck (options, attr) {
var $wrapper = $('<select>').attr({id: attr.id, name: attr.id, style: 'display: block;', class: 'field col-12 mb1', multiple: 'multiple'})
var idKey = attr.primaryKey ? attr.primaryKey : 'Id'
$.each(options, function(i, item) {
var $itemWrapper = $('<option>').attr({class: 'filter-item', value:item[idKey]}).text(item.Name)
$wrapper.append($itemWrapper);
})
return $wrapper
}
Never could figure out the answer, possibly due to my own incompetence with javascript (pretty sure i couldn't write a hello world script in javascript if i had a gun to my head). Have decided to go another way that won't require me rewriting that section of code.
I'm using CKEditor's template plugin to load the templates in the editor. In the templates I've defined likt this.
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}]
When the user selects a template, the html is loaded which is fine. But also, it would be great if there is a way to get the property of the current selected template from the CKEditor instance.
I need to get the html_et property value in this case. I didn't find anything in the documentation related to this. Any help would be appreciated.
#Lingasamy Sakthivel that is not how you define templates in CKEditor.
If you want to use templates, you need to create a file like the default one in templates plugin: https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/templates/default.js
NOTE: when defining my test template file, I have named the file my_template.js and have given the same name to template definition CKEDITOR.addTemplates( 'my_templates', {... for simplicity.
Now, Once you have the file ready, you can assign it to editor. To do that you need to specify path to your file (full or relative to context of your application) and definitions that should be loaded.
In the example below I'm loading the default CKEditor file as well as my custom one:
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
templates_files : [
'/myApp/ckeditor/plugins/templates/templates/default.js',
'/myApp/ckeditor/my_templates.js'
],
templates : 'default,my_templates'
});
This is for files - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates_files
This is for definitions - https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates
Now the hard part. You have written you want to know which template was selected but to be honest I don't know any way in which you could do that except for changing plugin code.
When template definition is loaded, templates inside it are loaded one by one
and assigned an onclick handler. This is IMHO the place we you could add your custom code for getting the html_et property - https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/templates/dialogs/templates.js#L53-L55.
To do that you would need to get the source version of the editor, make changes in template plugin and then building your editor (recommended approach):
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_source.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_build.html
Alternatively you can download CKEditor without the templates plugin (can be done using online builder where you can remove templates plugin from your build). Next you need to manually download that plugin, make your changes and add that plugin to editor by dropping plugin folder inside ckeditor/plugins folder and using the extraPlugins setting.
Can you try like this?
var editor = CKEDITOR.replace('editor1', {
templates: [
{
title: "Quickclick 1",
image: "template1.png",
description: "Quickclick 1 template",
html_et: "<span>test1</span>",
html:' <span>test</span>'
}
]
});
alert(editor.config.templates[0].html_et);
In the past, I typically added my dialog as HTML as shown on the first example.
I never liked having to maintain both the HTML page and the JavaScript page, and am thinking of using either the second or third example (which one is more jQueryish?).
What are the pros and cons of both solutions? For instance, will the second or third solution cause new DOM to be created, and if so will this cause any issues? Or will they improve performance as more likely the JavaScript will be cached? Or anything else???
$("#click1").click(function() {$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
$("#click2").click(function() {$("<div title='mytitle2'>hello2</div>").dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
});
$("#click3").click(function() {jQuery('<div/>', {title: 'my title3',text: 'hello3'}).dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
})
});
<p id="click1">Click1</p>
<p id="click2">Click2</p>
<p id="click3">Click3</p>
<div id="dialog" title="my title1">
hello1
</div>
Best case is to separate HTML and JS. What is the main reason that you dont like this solution?
What if you must send your templates to a designer team that have to restructure some DIVs? Most likely they have no-, or very little idea of Javascript, and dont know what to do.
Pros example 1:
Structured files. Separating backbone (HTML) and UI functionalities (JS)
More performant, because JS have not to create some DOM objects. They already are given in the HTML file, and JS has just to select it
Designer team can use the html templates whitout knowledge of JS
Contras Example 2&3
It have not the benefits of the explained example 1 pros
Benefits between Examples 2&3
It could be that Example 3 is more performant. Because internally JS must split your written html string, into objects to create the new DOM object. But you should test it in a loop.
Contras example 3
Writing jQuery instead of the alias $ all the time, results you longer code. Why not stay using $?
I have a working solution in regard to rendering layouts with views in regions in a Marionette application I'm working on, but something doesn't feel right about it. Do you have to append anything directly to the DOM?
Here is my method in the controller:
//Grab the main Layout
var layout = new APP.Views.LayoutView();
//Render that layout
layout.render();
//Make the model
var simpleModel = new APP.Models.simpleModel({
"field1" : "foo",
"field2" : "bar"
});
layout.header.show(new APP.Views.subView({model: simpleModel}));
$('body').html(layout.el);
It's the last part that feels unnatural to me. This is primarily because if I move 'layout.header.show' to after the .html(), then it doesn't render properly. What's the point of regions if they aren't dynamically changable after pushing it to the DOM?
Here is my layout:
APP.Views.LayoutView = Backbone.Marionette.Layout.extend({
template: "#layoutTemplate",
className : 'wrapper',
regions: {
header: "#header",
footer: "#footer"
}
});
and here is the sub view:
APP.Views.subView = Backbone.Marionette.ItemView.extend({
template : '#headerTemplate',
className: 'container'
});
As I said, this works, but it feels like I'm not using regions properly. Is there a better, more concise way to do this that will allow you access to regions after you rend the layout to the DOM?
In the Marionette documentation there seems to be no mention of using .html() to get things on the page -- I'm wondering if this is left out because it's not needed or that it's assumed.
Can anyone help?
Okay, so it seems like this can be circumvented by creating a 'region' in your application, then using .show() to show the layouts inside of it.
Here is a link to a fiddle I found on SO that helped: http://jsfiddle.net/TDqkj/6/
as well as to another question: Understanding layouts in Marionette for Backbone.js
The fiddle in particular has this code:
App = new Backbone.Marionette.Application();
App.addRegions({
'nav': '#nav',
'content': '#content'
});
Which the programmer than uses to add layouts to those regions -- meaning you never have to append to the DOM.
If anyone else has a more elegant solution, please post!
I am starting out with Sencha's mobile web app framework. It seems the interface has to be always built procedurally or with html strings. This is so unintuitive! Is there a way to put your template code in an HTML file and have Sencha use those files as templates? That way I can have a clear separation from the interface layer. Thanks for any advise or experience.
You can define your basic html, then 'wire' the application together. Just about every component has a key called renderTo. So if you had a very simple html template like this:
<body>
<div id="myButton"></div>
</body>
You could create a button and wire it to that div with the following javascript:
var button = Ext.create('Ext.Button', {
text: 'Button',
renderTo: '#myButton'
});
...That being said, Sencha's frameworks expect that you design applications programmatically (that is, entirely in Javascript).
You could return a template or markup from an external file using an ajax request.
The items of your panel would look something like the following:
items: [
{
id: "panel",
html: "<p>Loading...</p>"
}
]
Then you could use the ajax request to update the content of the panel element with the content of template.html:
Ext.Ajax.request({
url: 'template.html',
callback: function(options, success, response) {
this.getComponent('panel').update(response.responseText);
},
scope: this
});
Updating your content this way is useful if your managed content is only available as markup or you haven't got round to creating a web service using json, for example.