Sencha on jimueller

ExtJS Learning Resources

Fri, 03 Mar 2017 08:02:21 -0600

Learning ExtJS can be a bit of a challange since, although it is well documented, there seems to be less “real world” examples available. Since ExtJS has become more focused on the enterprise, there is less activity on typical Q&A platforms like Stack Overflow. Finally, ExtJS has made major changes in its last few releases which leaves many of the examples available badly outdated.

The good news is that there some great resources available for learning ExtJS, in addition to Sencha’s documentation. Some are free, but those that aren’t free are still pretty cheap for what you get.

Books

Sencha Ext JS 6 Bootcamp in a Book: Classic Toolkit Edition Amazon by Steve Drucker of Fig Leaf is in my opinion the best, most cost-effective resource available for learning ExtJS. The book is about $60 and is basically the student guide for a weeklong course on ExtJS. The previous version of the book, covering ExtJS 5 is still available for on $25, and for learning ExtJS fundamentals there is no major differences. I consider this book to be the equivelent of classes provided by Sencha, which can cost more than a $1000.

The book covers everything you need to build ExtJS applications if you have no ExtJS experience. There are no gaps for a beginner and even if you have ExtJS experience it is a great way to get the complete picture of building and app and filling in any gaps you may have. The book does have some examples of creating custom components, but it does not go in depth on more advanced ExtJS topics. If you are strictly looking for advanced ExtJS, this is not the best book for you.

ExtJS Documentation

The Sencha ExtJS documentation is really good but in many cases you really have to know what you are looking for. Like most SDK/API documentation, it is not going always tell you how to accomplish your goal. I’ve used the following practices to get the most out of the ExtJS docs.

Skim through all of the docs files to get an idea of what is available
Use the search functionality and look for synonyms when trying to find specific events, methods, or properties
View the source to view JSDuck comments that may be missing from the new docs site

To learn ExtJS, I spend a significant amount of time reading the docs to understand what classes were available and their purpose. I try to take a “when in Rome” approach when using frameworks, so in an ExtJS project, I will try to find the ExtJS way of doing things. By browsing the docs, I was able to have an idea of what framework classes could be used to accomplish a goal without resorting to using another framework like jQuery or writing my own function. Ext has many utility classes and methods on the Ext object that can do just about anything jQuery can do, and has functions for formatting or manipulating text. ExtJS is a large framework and there are no shortcuts for understanding what it provides.

When looking for a specific method, event, or property, it’s useful to use the search/filter tool. Ext is pretty consistent on naming, but often it’s necessary to search for synonyms. For example, if you are looking for the control of a component’s visibility, try searching for “visible, hidden, hide, show” so that you don’t overlook one of the class’s members.

When Sencha switched the docs site in late 2016, the new version has had trouble parsing out the JSDuck comments used in ExtJS source code. This seems to be expecially true for inherited docs. To

extjs currency number field

Sun, 19 Feb 2017 11:21:20 -0600

allowing sencha cmd to serve on port 80 on linux

Sat, 06 Aug 2016 11:20:50 -0600

If you’ve tried to serve files with Sencha Cmd on port 80, you’ll probably see an error like this.

user@localhost ~/dev/extjs/extjsapp $ sencha web -p 80 start
Sencha Cmd v6.1.3.42
[INF] Starting server on port : 80
[INF] Mapping http://localhost:80/ to ....
[WRN] FAILED SelectChannelConnector@0.0.0.0:80: java.net.SocketException: Permission denied
[WRN] FAILED org.eclipse.jetty.server.Server@5d25ad3: java.net.SocketException: Permission denied
Exception in thread "Thread-5" com.sencha.exceptions.BasicException: Permission denied
	at com.sencha.exceptions.BasicException.wrap(BasicException.java:54)
	at com.sencha.exceptions.BasicException.stealthify(BasicException.java:43)
	at com.sencha.exceptions.BasicException.raise(BasicException.java:35)
	at com.sencha.util.http.Server.start(Server.java:265)
	at com.sencha.util.JettyServer.start(JettyServer.java:102)
	at com.sencha.command.filesystem.StartCommand$1.run(StartCommand.java:72)
	at com.sencha.util.ThreadUtil$1.run(ThreadUtil.java:65)
	at com.sencha.util.ThreadUtil$2.run(ThreadUtil.java:162)
	at java.lang.Thread.run(Thread.java:745)
Caused by: java.net.SocketException: Permission denied
	at sun.nio.ch.Net.bind0(Native Method)
	at sun.nio.ch.Net.bind(Net.java:433)
	at sun.nio.ch.Net.bind(Net.java:425)
	at sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:223)
	at sun.nio.ch.ServerSocketAdaptor.bind(ServerSocketAdaptor.java:74)
	at org.eclipse.jetty.server.nio.SelectChannelConnector.open(SelectChannelConnector.java:187)
	at org.eclipse.jetty.server.AbstractConnector.doStart(AbstractConnector.java:316)
	at org.eclipse.jetty.server.nio.SelectChannelConnector.doStart(SelectChannelConnector.java:265)
	at org.eclipse.jetty.util.component.AbstractLifeCycle.start(AbstractLifeCycle.java:64)
	at org.eclipse.jetty.server.Server.doStart(Server.java:288)
	at org.eclipse.jetty.util.component.AbstractLifeCycle.start(AbstractLifeCycle.java:64)
	at com.sencha.util.http.Server.start(Server.java:263)
	... 5 more

Sencha Cmd defaults to serving files port 1841, but sometimes there is a need to serve on port 80. One reason is if you are setting ‘localhost’ as an allowed cross-origin domain.

On Linux, only root is allowed to bind processes to reserved ports - those up to 1023. There are a few methods to get around this, such as configuring port routing or authbind. I prefer allowing java processes to bind to port 80 by granting the CAP_NET_BIND_SERVICE permission permenantly to java. Authbind can be used for one time access, and may be more appropriate if there are security concerns.

The following steps will demonstrate how to use setcap to allow java to bind on port 80. I would prefer to only grant Sencha Cmd with the permission, but was unable to determine how to do this.

First, determine where java is installed, by following the symbolic links.

> whereis java

The output will be similar to: java: /usr/bin/java /usr/share/java /usr/share/man/man1/java.1.gz and we see that java is in /usr/bin/java.

Let’s take a look at that.

> ls -l /usr/bin/java lrwxrwxrwx 1 root root 22 Jul 24 19:41 /usr/bin/java -> /etc/alternatives/java

We can see that /usr/bin/java is a symbolic link to /etc/alternatives/java, let’s take a look at that.

> ls -l /etc/alternatives/java lrwxrwxrwx 1 root root 46 Jul 24 19:41 /etc/alternatives/java -> /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java

We can now see that the actual location of java is /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java. Now that we know where java is, we can grant permission to bind to low-numbered ports.

sudo setcap CAP_NET_BIND_SERVICE=+eip /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java

Here we are granting with the following permissions.

e:Effictive activates the capability
p:Permitted allows the capability
i:Inherites the capability is inherited by child processes.

Now that the CAP_NET_BIND_SERVICE capability has been granted, let’s try serving on port 80.

user@localhost ~/dev/extjs/extjsapp $ sencha web -p 80 start
Sencha Cmd v6.1.3.42
[INF] Starting server on port : 80
[INF] Mapping http://localhost:80/ to ....

That looks much better.