in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})
Related
first let me say that I am newbie with ionic, I tried find my solution in Google, but now the information is mixed with ionic 1, ionic 2 and now "ionic 3".
I need do a dropdown menu which I call "create method" with parameters and this method draw menu with options.
I tested different methods, first try modify popups, then modals, but I can't solve my problem.
I need know the best form to do this, I think that I should make external component and use his methods to do what I want. I used Sencha Touch so far now, and I used this code to this:
Ext.create("Amix.view.general.Menu",{
options : options,
callback : callback
});
Ext.define('Amix.view.general.Menu',{
extend: 'Ext.panel',
...
listeners: {
initialize: function(){
Ext.Viewport.add(this);
...
This is what I want:
Also, what is the best form to select item of the DOM? In sencha I used Ext.getCmp() or Ext.select(), $() on jQuery, or document.queryselector on JavaScript.
As per your screenshot, you need ionic Popover. For Ionic 2.x and 3.x there inbuilt component by ionic Popover
You can use this simply importing to your page
import { PopoverController } from 'ionic-angular';
#Component({})
class MyPage {
constructor(public popoverCtrl: PopoverController) {}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverPage);
popover.present({
ev: myEvent
});
}
}
See demo here
When i am adding static array then slider is working.
When using as below:
$scope.bestDeals = [{imagename: 'test', title: 'Best Deal 1' }, {imagename: 'test1', title: 'test' } ];
But problem is while i am getting data by using ajax like:
$http.get(baseurl + 'controller/getimagesData/').success(function(data)
{
$scope.bestDeals = data;
});
Its not working .
I have already tried another slider also but same problem i am facing..
I assume, your working on Bootstrap CSS for carousel. Just read the API docs of UI-Angular Bootstrap carousel control
I believe your success callback contains the meta data of the images uploaded. Make sure to check the log of the meta data and its absolute path.
Or try to use ng-src directive in your img tag or use $sce for contextual escaping.
I'm coding a Kendo/Angular program that allows users to add tabs to a TabStrip dynamically. This works fine, however I need to include in the tab content an Angular directive, like so:
$scope.tabStrip.append(
[{
text: "Tab Title",
content: "<div my-directive></div>"
}]
);
This does not work as Angular is not aware of the new content. Is including a directive in the content feasible?
so Im building a brand new ExtJS 5 application using Sencha CMD 5.1.2.52 with the command sencha generate app MYAPP ../MYAPP
It automatically renders to the body tag, but I would rather render it to a div with the id "#myDiv". I looked for the renderto attribute on several files (views, models, app configuration files, etc) with no luck.
So is there a way to override this behavior? Thanks!
When you build an application with Sencha command, the main container will be a ViewPort and by default every ViewPort is rendered to document.body.
You could remove the autoCreateViewport config, and add a launch object where you would create your panel, example:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
//autoCreateViewport: 'MyApp.view.main.Main'
launch: function() {
Ext.create('MyApp.view.main.Main',{
renderTo: yourDivHere
});
}
});
I m trying to use Kendo grid in my angular js app. I m creating a directive so I can use it in different tables among the application. Once the ng-repeat renders the dom I want to call:
element.kendogrid().
Since there is no post-render callback for ng-repeat, some people suggest using two directives:
1-
angular.module('app')
.directive('rowDirective', function () {
return function(scope, element){
if (scope.$last){
scope.$emit('LastElementMessage');
}
};
});
2-
angular.module('app')
.directive('tableDirective', function () {
return function(scope, element){
scope.$on('LastElementMessage', function(event){
$(element).kendoGrid({
scrollable: true,
sortable: true,
});
});
}
});
This approach works fine and everything is executed in the order it should. The ng-repeat works fine by it self, which means it renders the items in the right order but when I use the kendo-grid, it renders this: {{customer.CustomerID}} inside the grid. Has anyone gone through something like this ?
Well, perhaps you should take a look at Angular Kendo UI project at http://kendo-labs.github.io/angular-kendo/ - it does rather good job of "marrying" Kendo UI with AngularJS.
See http://demos.telerik.com/kendo-ui/grid/angular.
There are specific custom directives that enable kendo ui to play nicely with angular js. E.G. k-data-source, k-columns, k-selectable, k-pageable. These should be included in the latest version of kendo ui. Just make sure to include "kendo.directives" as a dependency on your top level-module :
var MyModule = angular.module('MyModule', ["ngRoute", "kendo.directives"]);