I can't get get Intellisense to display any methods other than Object methods when I inherit through Ext.extend(). Is it possible for Intellisense to display the additional methods?
I used the workaround suggested in this SO question to get the namespaces working, so I don't believe that is related to this issue.
Example Code is below:
///<reference path="ext-base.js" />
///<reference path="ext-all.js" />
///<reference path="namespace.js" />
MNS.Production.DetailedGrid = Ext.extend(MNS.commonUI.GridPanel,
{
initComponent: function () {
var columns = this.getColumns();
},
getColumns: function () {
var columns =
//...build columns
},
//....
//....Additional methods, etc.
});
var detailedGrid = new MNS.Production.DetailedGrid();
Although I get intellisense for the MNS.Production.DetailedGrid() command, I don't get any intellisense on the methods of the detailedGrid object, except default methods. How do I get Visual Studio to show these methods?
I have found that although there are two ways to extend an object using ExtJS, the only way that Intellisense will work with your code is if you use the following syntax:
///<reference path="ext-base.js" />
///<reference path="ext-all.js" />
// create constructor for new class
Ext.ResizableConstrained = function(el, config){
Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};
// extend the base class
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
setXConstraint : function(left, right){
// Obtain a reference to parent dd property and setXConstraint
this.dd.setXConstraint(left, right);
},
setYConstraint : function(up, down){
// Obtain a reference to parent dd property and setYConstraint
this.dd.setYConstraint(up, down);
}
});
The /// references need to be at the top of the file.
Have you seen this MSDN post?
MSDN Blog
Related
I've cloned the OOTB widget-form, named it widget-form-md, and created an additional option schema for hideRelatedLists:
I have a separate widget that is embedding my cloned widget-form-md and hope to display it via a Material Design modal. My client script for the modal looks like this:
function x ($scope, $location, spUtil, amb, $mdDialog, $http, $window, $rootScope, $timeout){
var c = this;
c.newRequest = function() {
$mdDialog.show({
contentElement: '#hr_request',
parent: angular.element(document.body),
clickOutsideToClose:true
});
spUtil.get("widget-form-md", {
request_name: 'hr_request',
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
}).then(function(response) {
c.hr_request = response;
});
};
}
What is the correct syntax to pass in my option schema into the spUtil? I've tried
spUtil.get("widget-form-md", {
request_name: 'hr_request',
hideRelatedLists: true
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
})
and
spUtil.get("widget-form-md", {
request_name: 'hr_request',
options: {hideRelatedLists:true},
view: 'hr_request',
table: 'x_dnf_federal_hr_e_federal_hr_cases'
})
Neither of them worked and I can't seem to find any documentation out there on how to do this. Any suggestions? Thanks!
First: Option Schema is used to configure a widget via a table:
https://dxsherpa.com/blogs/widget-options-schema-in-service-portal/
The Solution to the missing parameters, which don't show in the options of the called widgets was here: https://community.servicenow.com/community?id=community_question&sys_id=ea83c365dbd8dbc01dcaf3231f9619d2
When a widget is called using spUtil (client) then the parameters passed are accessed using "input".
When a widget is called using $sp (server) then the parameters passed are accessed using "options"
Since the call the widget with spUtil, we have the data on the server in the input object. Therefor in the server of the called widget:
data.requestName = input.request_name;
data.hideRelatedLists = input.hideRelatedLists;
// or the short version, if widget also gets parameters from URL and options:
data.requestName = $sp.getParameter('requestName ') || options.requestName || input.requestName;
It's a shame this is not described in the official documentation for it: https://developer.servicenow.com/app.do#!/api_doc?v=london&id=spUtilAPI
I'm familiar with the reference tag in typescript, but none of the definitely typed modules seem to really work natively in a browser and if I use the 'import' tag to make the intellisense work it generates extraneous code for creating modules (I assume for use with node.js?) therefore I get exceptions in the browser.
///<reference path='paper/paper.d.ts' />
//import paper = require('paper'); //This makes intellisense work
paper.setup(<HTMLCanvasElement>document.getElementById("#my-canvas"));
var path = new paper.Path();
path.strokeColor = 'black';
var start = new paper.Point(100, 100);
path.moveTo(start);
path.lineTo(start.add([200, -50]));
paper.view.draw();
Here's the generated file that keeps a require statement ... which means nothing in the browser. Any idea how to not get this to happen?
"use strict";
///<reference path='paper/paper.d.ts' />
Object.defineProperty(exports, "__esModule", { value: true });
var paper = require("paper"); //Garbage that causes exceptions
paper.setup(document.getElementById("#my-canvas"));
var path = new paper.Path();
path.strokeColor = 'black';
var start = new paper.Point(100, 100);
path.moveTo(start);
path.lineTo(start.add([200, -50]));
paper.view.draw();
//# sourceMappingURL=app.js.map
You can use the UMD, aka as namespace trick:
// custom-typings/paper.d.ts
import * from 'paper'
export as namespace paper
// tsconfig.json
{
"include": {
"custom-typings"
}
}
I want to expose a method from a custom component in a NativeScript project. Here is the conceptual setup:
MyComponent.xml
<StackLayout loaded="loaded"> ...UI markup... </StackLayout>
MyComponent.ts
export function loaded(args) { //do stuff };
export function myCustomMethod() { //do more stuff };
MyPage.xml
<Page xmlns:widget="..." loaded="loaded">
<widget:MyComponent id="myComponent" />
</Page>
MyPage.ts
export function loaded(args) {
let page = <Page>args.object;
let widget = page.getViewById("myComponent");
widget.myCustomMethod(); //<--THIS DOES NOT WORK
}
Question: How do I properly expose the myCustomMethod on the custom component so that the hosting page can access and call it via JavaScript?
By default, when trying to get a reference to the custom component on the page, a reference to the custom component's layout container is returned (in this example, a StackLayout).
So, as a workaround, I am doing this:
MyComponent.ts
export function loaded(args) {
let stackLayout = <StackLayout>args.object; //Layout container
stackLayout.myCustomMethod = myCustomMethod; //Attach custom method to StackLayout
}
It's a bit of a hack, but it's working. Is there any better way to expose custom component methods short of creating a super class for the layout container?
UPDATE
To be more accurate, the custom component has instance properties, so the eventual solution would need to support a scenario like...
MyComponent.ts
let isStarted = false;
export function loaded(args){ // do stuff };
export function myCustomMethod() { isStarted = true; };
As the method you want to reuse is not coupled to your customCompoenent, you can create a common file and require it where needed and reuse the exposed methods accordingly. Or you can directly import your MyComponent.ts and reuse its exported methods (not so good idea as you will probably have access to all exposed methods of your MyCompoennt.ts like onLoaded, onNavigationgTo, etc.)
For example:
in your navigator.ts (or if you prefer to your MyComponent.ts)
import frame = require("ui/frame");
export function navigateBack() {
frame.goBack();
}
and then reuse it where needed like this:
MyPage.ts
import navigatorModule = require("navigator");
export function goBack(args: observable.EventData) {
navigatorModule.goBack(); // we are reusing goBack() from navigator.ts
}
Another applicable option is to use MVVM pattern and expose your methods via the binding context.
As far as I can tell, Backbone.js view represents DOM element. I take it from existing DOM or create it on the fly in el attribute.
In my case, I want to take it from server with AJAX request because I'm using Django templates and don't want to rewrite everything to JavaScript templates.
So I define el function that performs AJAX request.
el: function() {
model.fetch().success(function(response) {
return response.template
})
}
Of course, it does NOT work because AJAX request is executed asynchronous.
This means that I don't have el attribute and events does NOT work neither. Can I fix it?
Maybe the Backbone.js framework isn't the right tool for my needs? The reason I want to use that was to have some structure for the code.
P.S. I'm new to Backbone.js.
Do your ajax request from another view, or directly after the page load using jquery directly, and after you've downloaded your template, THEN instantiate your backbone view class with the proper id/el or whatever (depending on where you stored your ajax fetched template). Depending on your use-case, this may or may not be a sensible approach.
Another, perhaps more typical approach, would be to set up your view with some placeholder element (saying "loading" or whatever), then fire off the ajax, and after the updated template has been retrieved, then update your view accordingly (replace the placeholder with the actual template you requested).
When/if you update your view with new/other DOM elements, you need to call the view's delegateEvents method to rebind your events to the new elements, see:
http://backbonejs.org/#View-delegateEvents
I came across a similar requirement. In my instance, I was running asp.net and wanted to pull my templates from user controls. The first thing I would recommend is looking into Marionette because it will save you from writing a lot of boiler plate code in Backbone. The next step is to override how your templates are loaded. In this case I created a function that uses Ajax to retrieve the HTML from the server. I found an example of this function where they were using it to pull down html pages so I did a little modification so I can make MVC type requests. I can't remember where I found the idea from; otherwise, I would give the link here.
function JackTemplateLoader(params) {
if (typeof params === 'undefined') params = {};
var TEMPLATE_DIR = params.dir || '';
var file_cache = {};
function get_filename(name) {
if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-'));
return TEMPLATE_DIR + name;
}
this.get_template = function (name) {
var template;
var file = get_filename(name);
var file_content;
var result;
if (!(file_content = file_cache[name])) {
$.ajax({
url: file,
async: false,
success: function (data) {
file_content = data; // wrap top-level templates for selection
file_cache[name] = file_content;
}
});
}
//return file_content.find('#' + name).html();
return file_content;
}
this.clear_cache = function () {
template_cache = {};
};
}
The third step would be to override Marionette's method to load templates. I did this in the app.addInitializer method. Here I am initializing my template loader and setting it's directory to a route handler. So when I want to load a template, I just set the template: "templatename" in my view and Backbone will load the template from api/ApplicationScreens/templatename. I am also overriding my template compiling to use Handlebars because ASP.net is not impressed with the <%= %> syntax.
app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' });
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) {
if (name == undefined) {
return "";
} else {
var template = app.JackTemplateLoader.get_template(name);
return template;
}
};
// compiling
Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {
var compiled = Handlebars.compile(rawTemplate);
return compiled;
};
// rendering
Backbone.Marionette.Renderer.render = function (template, data) {
var template = Marionette.TemplateCache.get(template);
return template(data);
}
Hopefully this helps. I've been working on a large dynamic website and it is coming along very nicely. I am constantly being surprised by the overall functionality and flow of using Marionette and Backbone.js.
I am new to prototype and finding it a lot more difficult than jquery. All i want to do is get the inner html of various classes.
$$('.book').each(function() {
var msg = this.down(".information");
alert(msg.innerHTML);
//new Tip(this, msg.innerHTML, {stem: 'topLeft', hook: { tip: 'topLeft', mouse: true }, offset: { x: 14, y: 14 }});
});
I'm trying to create tooltips for multiple items, but I'm not even getting the alert.
I think you can probably prevent the extra dom work of down() like this:
$$('.book .information').each(function(book) {
alert(book.innerHTML);
});
remember you also have the ability to use advanced CSS2 and CSS3 selectors in prototype like this for example:
$$('.book a[rel]').each(function(el) {
alert(el.rel);
});
see the bottom of this page for more examples http://www.prototypejs.org/api/utility/dollar-dollar
The this variable is not pointing to the element you're iterating over in Prototype, you have to explicitly use a parameter:
$$('.book').each(function(book) {
var msg = book.down(".information");
alert(msg.innerHTML);
});