PDA

View Full Version : WebStorm + Sencha



jep
2 Nov 2011, 2:45 PM
Another thread talked about what editors people used with ST. Thanks to it, I've started using WebStorm and really like it. I thought I'd create a thread that might have tips for people using it together with ST.

One thing I wanted to share that I learned recently is how to set up an object stub so it will validate your code in ways that aren't typically possible. This one isn't Sencha specific, but I find it helps a lot because of models and ajaxed in json that can easily fall prey to typos.

For example, create a .js file in your project and put this in it:



FooType = function () {};
FooType.prototype.field1 = 1;
FooType.prototype.field2 = 1;
FooType.prototype.field3 = 1;


Now in another .js file, create this code:



function fn(/*FooType*/ foo) {
foo.field2 = foo.field1 * 2;
foo.field3 = foo.field4;
}


will cause it to loosely validate foo as FooType and realize that field1 is a valid member but field4 isn't. It isn't perfect, because you could still make a mistake and foo.field1 might not be initialized or something. It would also be nice if it cold detect mistakes on the left side of the assignment (like warning you about "foo.field5 = 33" because field5 wasn't supposed to be part of foo), but it's still a big improvement over the total lack of type-checking you normally get.

You can also put these stubs in a file that doesn't get loaded by your app, but it will still be used for the type-checking.

So, anyone else with WebStorm tips they want to share?

jay@moduscreate.com
7 Nov 2011, 8:20 AM
webstorm will read valid JsDoc! :D

jep
7 Nov 2011, 1:00 PM
Yeah, now I just have to get around to WRITING JsDoc. :D

Here's another trick I've been messing with:



jep = Ext.namespace('jep'); // silly, but avoids warnings

jep.objectToModel = function (name, constructor) {
var model = Ext.apply({fields:[]});
var obj = constructor.prototype;

for (var propOrMethod in obj) {
if (obj.hasOwnProperty(propOrMethod)) {
var def = obj[propOrMethod];

if (propOrMethod === 'data') {
for (var fieldName in def) {
if (def.hasOwnProperty(fieldName)) {
model.fields.push(Ext.apply({name:fieldName}, def[fieldName]));
}
}
}
else {
model[propOrMethod] = def;
}
}
}

Ext.regModel(name, model);
};

jep.User = function () {};
jep.User.prototype.data = {
name:{type: 'string'},
age:{type: 'int'},
phone:{type: 'string'},
alive:{type: 'boolean', defaultValue: true}
};
jep.User.prototype.changeName = function() {
var oldName = this.get('name'),
newName = oldName + " The Barbarian";

this.set('name', newName);
};
jep.objectToModel('User', jep.User);



What I did here is put in a little syntactic sugar for WebStorm so it could tell what the Model was defining. Now I can do this:



var /*jep.User*/ u = Ext.ModelMgr.create({name:'Conan', age:24, phone:'555-555-5555', alive:true}, 'User');

var n = u.data.name;
var a = u.data.age;
var q = u.data.badProperty;

u.changeName();
u.badFunction();


And I get highlights on badProperty and badFunction. I also get autocompletion on name, age, phone, alive and changeName. Pretty nifty, and worth adding a tiny bit of overhead to the code.