I am new to Extjs. I have configured my app with Extjs 6.6.0 . For every panel I am creating using Ext.create, it generates 2 div elements. The controller init is called twice and so also all other methods.
For exa. Ext.create('something.Mypanel') would called twice and generates 2 div elements in dom.It appends the second div next to the first one. Any clue on it ?
Do I have to change anything in app.json which is loading 2 files ?
I was able to resolve it. In Application.js , I added the router controller(in controllers property), which made the route to flow twice. I moved the route controller to app.js mainView. Now it's getting called once.
Related
I am trying to work out how some code is working, it uses angular throughout the front end.
When the page first loads a div with ng-include should be in the dom but its src url is a call to a js function that returns undefined on page load.
<div id="test_div" ng-include="getUrl()"></div>
When I check the dom the entire element is not on the page. After a search button is pressed some other calls happen and the call to getUrl() will return a valid url from that point on, which returns html content from the server.
It is only then that the div appears in the dom and it now has a class added to it of class="ng-scope".
I dont understand how this is happening, does ng-include continue to request a resource until it is avilable?
I couldnt find this information in the documentation.
I'm facing an interesting issue here.
I'm developing a Chrome Extension with a content script.
This extension is intended to add a little div to a page, this div using AngularJS. (I chose Angular because I want this div's data to be readily updated by change of var values).
I'm able to add the div once and bootstrap it. So the behavior of the div is fine.
But the main page (which I have no control over) often reloads everything using Ajax. (Then I'm totally unable - I think - to get events from certain elements being removed).
I was able to create ways to check if my elements are still on the page, and if not, they are added again. The appendChildPersistent method takes care of it. (It waits for a certain element to appear on the main page. Adds my element to it. Runs the callback when added. Keep checking if the element is still there, if not, repeat all over).
So all my ordinary elements work perfectly.
But this angular div cannot be bootstraped a second time.
Procedures:
I wait until a certain element appear on the main page
I add my own div myDiv from a plain text html using jquery append to the main page div
I load the angular application and bootstrap it using the callback function when the div is added:
Code:
var txt = '<div id="myDivId" ng-controller="myController">{{testing}}</div>';
appendChildPersistent('myDivId', MyDiv, '#theTargetMainPageDiv', function()
{
var app = angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.testing = 'Welcome!';
});
angular.bootstrap(document, ['myApp']);
});
So, the first time my div is added, it works. The angular vars and directives work (in this example, the div shows "Welcome!"). But the second time, I get an "already bootstrapped" error. (But if I do not try to bootstrap again, the div becomes just plain text, no angular behavior, showing "{{testing}}" instead of "Welcome!").
Is there a way to unboostrap, redo bootstrap or another method I could work to get around this?
Your application only focuses on the div you insert. You can make an Angular application run on a certain area of the page instead of covering the whole document. Simply pass the DOM element to the bootstrap function:
angular.bootstrap(myDiv, ['myApp']);
This way Angular only runs in your div and you are able to bootstrap the app every time you add a new div.
I'm using Angular UI router in my app. This is what I'm doing.
A main view contains a child view and a div container for "pagination"
By default, initially, a first set of contents is loaded
When a user clicks on "next page", next set of contents is loaded (with the URL also being changed to /content/2 (where 2 indicates the next page number)
All is working well, but each time the contents are loaded, it goes "blank" before it loads. So it seems like it's reloading the view (which is obvious).
What I would like to do is reload the content without having that "blank" page. How can I achieve this?
At first thought, I think you could you the same approach as infinite-scroll, which is what I'm using. So you make a GET request to the server to get new content and push it to the list on clicking 'next'. However, since the URL changes also. This will cause the controller to be reloaded. You can actually bypass this by setting reloadOnSearch to false.
I'm playing with Backbone and am getting one model rendered 4 extra times in my list view.
I create and fetch the collection before calling history.start but I don't think that has to do with it.
I'm calling against an api that is only returning 2 models in json. The first model rendered shows up just once and the next shows 5 times in a row. This happens every time.
Here's my code.
https://gist.github.com/3843944
On line 66 you have this line:
#$("div").append(view.render().el)
That gets called each time you render a service provider. Due to the generic selector, div, I think it's selecting every div that exists in the element. When you add the first entry, the only div that exists is <div class='providers'>. However, when it's rendering the second entry it's selecting that div and all new div's created by the first service provider and appended to the template.
Try something like this:
#$el.append(view.render().el)
I'm currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.