Proper way to embed EXTJS in html - element

What is the recommended way to stick Extjs elements in your html?
At the moment I have
<div><script type='text/javascript'>
Ext.onReady(function(){
new Ext.grid.Panel({params...}).show();
})
</script></div>
But this feels very awkward ( Embedding script tags all over the place rankles my soul )
Components have a renderTo, but if the html element doesn't exist, - I think? ( not too sure about that ) - that the component still gets created.

It depends entirely on what you want to do, check out the learning centre on Sencha:
http://www.sencha.com/learn/
http://www.sencha.com/learn/components/
Usually you use a complete layout system, though if you want to attach to an existing element, such as a div you'll need something like renderTo.

Related

Trying to use EJS to dynamically render an edit form

The problem seems to be with EJS. I might be trying to do something EJS wasn't designed for.
I'm working on a web app that uses forms with a variable number of fields. If a Mongo document I'm editing has only one field, I don't want to display input boxes for any additional fields.
I'm able to dynamically control how many fields are displayed when documents are edited but I'm not able to dynamically display the current value of the fields.
If I use the value tag like this: value=<%= document.field1 %>, it works fine. This, however, would have to be manually repeated for each field, including fields that won't be present.
What I want to do is something like this: value=<%= 'document.field' + (i+1) %>. This would ideally produce the same rendered HTML the code above does. However, what I see is 'document.field1' rather than the data I want to retrieve from the database.
EJS is just a thin wrapper around JavaScript code. Anything you can write in JavaScript you can write in EJS, it'll be included in the compiled template without modification.
So to reference a field with a dynamic name you'd use [] just like you would in any other JavaScript code. Based on the code you provided it would be something like this:
value="<%= document['field' + (i + 1)] %>"

Element Checkbox got its label always to the left and needs a link

How can I change the positions of checkbox and label and how to implement a link into the label?
$acceptGTC = new Element\Checkbox('AGBs');
$acceptGTC->setLabel('I Accept the GTC (show it).');
$this->add($acceptGTC);
regards
n00n
meanwhile:
I tried to overwrite the view helper for checkboxes.
copied
*/vendor/zendframework/zend-form/src/View/Helper/FormCheckbox.php
to
*/module/Application/src/Application/View/Helper/FormCheckbox.php
added to module.config.php
'viewhelpers' => array('checkbox'=>'Application\View\Helper'),
But it still uses the original one...
Do I have to tell zend to use my FormCheckbox?
I don't exactly know the way you are rendering your Zend_Form_Element, but in order to enhance the rendering as you want you should build a custom decorator, and add it to this element.
You should read the Zend documentation on Zend_Form_Decorators, everything is quite well explained and should lead you to a fancy solution.

Trying to replace content zones in typo3

What I'm aiming to do!
I'm creating a template for a site in typo3, and i'd like to get rid of typo3's default content zones, and replace them with my own.
I.E. On the page menu.
to remove left, content, border
and to keep/add. Header. Main. Right.
The problem!
I've found snippets around the web, and bluntly, what I'm expecting to happen, isn't happening. Where every post seems to be "Thank you, great success! ++", the code I paste isn't throwing any errors, and isn't doing anything, well, at all.
My attempt
Via the typo3 documentation http://typo3.org/documentation/snippets/sd/24/
I call mod.SHARED.colPos_list in order to choose the three sections to display
t3lib_extMgm::addPageTSConfig('
mod.SHARED.colPos_list = 0,1,3
');
And I edit the TCA in extTables.php to set them to my specs.
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array ("Header||Header||||||||","1"),
"0" => array ("Main||Main||||||||","0"),
"3" => array ("Right||Right||||||||","3"),
);
extTables.php is being called as as a die(); cuts the page.
I've cleared the cache and deleted typo3temp, logged out and in again.
But nothing happens.
My main guess, is, is this feature anything to do with templavoila? I removed it as I felt like trying out the new(er) typo3 fluid templating system, and didn't feel that I needed a GUI editor.
Any ideas?
Well - the more pages and content elements you got the more problems you will have to face when using TemplaVoila. Having comma separated values in XML structures saved to a single database field will be a performance killer as soon as you want to collect content from more than one page (uncached teaser menus or the like). Handling of references and "unused elements" is questionable as well. Of course it will work for small to medium sites, but concept wise a clean approach looks different.
Backend layouts are available since TYPO3 4.5 and work flawlessly since they just represent a normalized relation between elements and pages based on colPos. If you need more, Grid Elements will take this principle to the next level, offering even nested structures but still based on normalized relations, which will make your life much easier when it comes to DB cleaning and other maintenance tasks.
Find an introduction to backend layouts here: http://www.youtube.com/watch?v=SsxfNd4TYbk
Instead of removing default columns you can just rename them...
TIP: Use TemplaVoila extension for templating, you'll find much more flexibility there.

getBoundingClientRect() is returning zero in XUL

I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.

Div as Ajax.ActionLink

Is it possible to create Ajax.ActionLink which has instead of text, the whole DIV?
I'd like to map div on Ajax.ActionLink
I don't think that this will work using the standard MVC Ajax scripts. I believe that the MVC javascript is created to use an <a> element by default. On a different note, embedding a div tag within an <a> is not valid XHTML. What are you trying to achieve?
Using Jquery is probably the easiet way you want to go. As an example:
<div onclick="SomeAjaxFunction()">some div content</div>
function SomeAjaxFunction()
{
$.get('<%= Url.Action("SomeAction", "InSomeController") %>', function(data) {
$('.result').html(data); // assuming a partial view
alert('Load was performed.');
});
}
However, if you are dead set on using MS Ajax, to work with divs, you need to possibly look at the Sys.Mvc.MvcHelpers._asyncRequest function and do some of your own re-wrapping to make it usable. I have not tried or tested this, so use at your own risk. (Stick with the Jquery, there is far better help and support available.)