I have a GridPanel which is completely ready and working. It is currently rendered to the DOM by calling the render(id) method of Ext.grid.GridPanel.
This results in the GridPanel beeing rendered right before the html element with the given id.
For programming in my API i now need the rendered HTML of the table in my JavaScript to pass it to another function which can just act on HTML code and i can't change it for compatibility reasons. So the render function doesn't return anything and i don't know how to get the html or at least a reference to the DOM-node of the rendered HTML in JavaScript.
any suggestions?
You can get the HTML of the DOM node of the body of the grid by doing:
gridObject.body.dom.innerHTML
but it is not a table... it is markup styled to look like a table...
The best way to get grid data in HTML would be to add a method to the grid that renders its data into a template.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate
Create a dom element, say d.
Then do:
Ext.fly(d).replaceWith(yourGrid.getEl())
This should replace your created dom element's contents with grid's contents. This also retains all the state, since ext component is still there.
I dont think you can actually a "String" of the HTML and pass it on to a function. But you should be able to get reference to the document element, simply by getElementById since you will know the element id (pass it into the config of the GridPanel). You'll simply get reference to the top-level element.
Have you seen the kind of HTML generated by ExtJS? They are not that nice to work directly with, it's simpler if you work with the GridPanel objects.
Its just not possible to render the table before the element exists AND IS ADDED TO THE DOM in which the grid should be rendered. That's really unflexible i think. But i am forced to use it by the project so i will have to change the API to generate some entrypoint - DIVs for the EXT grid before rendering.
Related
Adding the view to dom id main-wrapper one router calls the view.Page loads one by one because of the sub view added in within main-wrapper. Need to know something similar to smooth loading the dom with fade in effect or shows the page once the dom is loaded.
Another approach you can take is hold off on adding the view to the main-wrapper until all subviews are created. Create a document fragment (default behavior if "el" is not defined). Once your view and its descendent views are all created in document fragment, then add it to the main-wrapper div. This way all of your content are shown at the same time instead of one view at a time.
Either use jQuery's onReady event or the native window.onload event. In both cases you register a callback function that then kicks of the initialization of the respective Backbone views.
I'm in need of some pointers in my landingPage-builder project. (i'm currently stuck!).
The main issue is as follows:
Each element in the template (like the h1 and the paragraph) has attached a directive. What I need to get the directive to do is: create a template of HTML with some other directives attached like ng-click, ng-options etc, keep the bindings to the model intact (currently far away from working), update the model when changed.
I'm not trying to append to, or replace the element the directive is on, but make a html-template and inserting it into the DOM (almost like another view) so that the model on the left can be updated from the "settings" box on the right.
The project can be viewed here: http://193.107.29.196/~stian123/landingPageV3/app/#/pagebuilder/2
You may need Allow-Control-Allow-Origin for Chrome: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
I'm a bit confused about $compile and doesn't really know when I need to use this part of the directives api.
Any suggestions?
Thank you!
If I understood your question correctly, you want to dynamically create templates, some of which have Angular attributes in them, then attach them to the DOM.
First, to (hopefully) answer your question, about when to call $compile:
Whenever you load in HTML from outside Angular's template system (like trying to set $(element).html(myHtmlString)), you need to let Angular compile it before you attach it to the DOM. In other words:
elem.append($compile(yourHTMLString)(scope));
This lets Angular traverse the DOM and parse any directives and bindings and attach them to the provided scope. If you don't $compile, Angular has no idea about those intended bindings at all, the HTML is never read by Angular.
Second, I don't know how flexible you want your templates to be, but if they're relatively fixed, but with some fixed customizable options (text, color, font-size etc), you might be better off creating a directive for each 'view', with the view options bound to the scope of the directive. Then you can just change the fields on the scope of the directive in the panel on the right side, and the view will update directly. You wouldn't even have to use $compile in this case.
If you want the user to be able to manually add the template HTML code, you will have to compile the HTML as described above.
I am using a directive "slideable" which creates a slideout area and has a toggle. This code that was not written by me but it demonstrates a larger issue for me. When I changing views (most commonly /user/:id type), slideable is a directive used on the template. The directive searches for an element during its link function and binds a click event. The issue is that when I am changing routes and the new view ( same type but different id ) is being loaded the directive is re-binding to the old view. If I stop the browser in chrome during the link then I will see two ng-views on the dom and the issue is it binds to the one that is leaving.
I also have other issues that appear to be related to this phenomenon. Is it normal that the old view would still be on the dom while the new view is being formulated?? Why wouldnt the old-view be destroyed before the new one is rendered? How do I get around this issue in a directive like this?
Thanks.
I am looking to understand conceptually what is happening. I already modified the directive to select the latest view and to appropriately search and bind to the correct element. But I am a bit perplexed as to why there would be a state where both co-exist on the dom.
One definitive reason why the old HTML fragment is briefly present along with the new one is to support animation of transitions from the old to the new. Take a look at the ngView documentation and you'll see an example of an animated transition, and it'll be clear that this is not a bug or a design flaw.
Usually when someone has problems with binding to the right element or element's event, it's because they are selecting the element without limiting the scope of the selector to the HTML fragment being added or updated, or trying to target parts of the DOM outside of the directive. So that's the first place to check, that the directive is doing things right, but like I said we'll need code to check on that.
my problem is, i have a tree element in scope.
with : angular.copy() i copy the tree element which i use in a dialog. the functionality of both are different(one has ng-click, the other not and so on..)
but the way how i show it in the view is the same.
then i use jquery-ui drag/drop for adding fields in the copied tree element. after that i save the dialog, and say treeelement = treelementcopy. it works perfect, i can see the changes on my real tree, but the problem is, the complete html has changed to the html in the dialog(now it has no ng-click anymore, or has the directive from the dialog for example)..
thanks for help!
You can use angular Drag/drop instead of jQuery it implemented using directives "http://codef0rmer.github.com/angular-dragdrop/"
I'd like to be able to generate a component from within a template. The use case for it is that when I generate a row in a DataView I'd like to be able to incorporate buttons and/or other components (maybe even a nested grid) to the rendered items.
So far everywhere I look all I see is a template calling another template. Is there a way to do what I'd like (generate component instead of just plain html) from an XTemplate?
Since an XTemplate is just used for generating markup to be inserted into the DOM, it alone is not enough to create components -- Components do have an underlying DOM element (through component.el.dom), but also exist as JavaScript objects in browser memory with other methods and properties.
It is possible to accomplish what you are asking through several different ways... you can use the XTemplate to generate the markup, and use the Component.applyTo config option to create a Component object in memory that is linked to the DOM element from your template. Of course, you will have to wait until the template is applied and then create a component with applyTo set to the correct DOM element.
You could also extend the XTemplate class to do the same thing just mentioned, but wrapped up in the applyTemplate stuff. I am pretty sure that Ext does not have a built-in way for the templates to create components -- so far they just create HTML.