Training Tips: simple skills to solve common coding problems

Original article: Training Tip: Simple Techniques for Solving Common Coding Problems

Many times, when I teach a Sencha training course, students often ask me to help me read their applications because they do not know how to solve some problems. Because it is not the code I wrote, it is sometimes difficult to give them answers quickly. Fortunately, I have a set of simple technologies that can be used to screen out the most obvious problems.

In this article, I will classify some of the most common problems and introduce some simple and effective strategies to solve these problems.

Problem: I cannot see my data

You are browsing your application and cannot see any data. This problem is usually easy to solve.

Try the following methods:

First, check the storage. You can do this in the browser console when the application is running:

Ext.getStore('MyStore').load();

This will return the storage object. You can use the data configuration item to simulate some data and check whether the length of the array is greater than 0.

If data is available, the problem may be related to rendering. Consider the following possible problems:

No fields mapped to the model?

Is the data array empty? On the browser developer toolbar, click the network tab.

Status Code 200? If not, a request error occurs. Check the model or storage proxy.

The request is working normally, but no data is displayed yet? Check whether the returned data is valid. For example, when the returned data format is JSON, you can copy the returned data from the Web tab of the browser to the http://jsonlint.com or http://jsonplint.com/to verify that the data token is valid. You can also manually write some test data.

Problem: application cannot be generated

Sencha Cmd cannot generate applications. In most cases, Sencha Cmd will clearly describe what is going on or what changes need to be made. However, problems that cannot be generated by Sencha Cmd will occur both now and later, and the error description is not clear.

This is probably because the code is incorrect. For example, the Code can run perfectly in the local environment, but cannot be generated.



Try the following method: This method is very radical, but most of the time it works. Use the same namespace on the command line to create a new application:

sencha generate app App ../myapp

Next, copy the app folder and make sure that app. js has been modified accordingly.

Now, try again.

Problem: Strange component-x Behavior

This type of problem has been hard to solve.

For example, the grid does not know why multiple scroll bars are displayed, or the display style in the tab panel is incorrect. It is very time-consuming to solve such problems in applications. This not only requires you to reproduce the problem through application navigation, but you also need to know the factors that cause the problem.

Try the following methods: a common solution for developers is to isolate the problem, narrow down the scope, and make data blocks easier to manage.

Isolation Problems

Use Sencha Cmd to create a new application in the same namespace.

Next, copy the problematic class and test it.

Has the same bug occurred? Try to solve this problem in the test application.

You can also try to recreate the class for isolation. At the beginning, only the required code is included.

Can it work? If there are no errors in the framework and no errors in the class, it means that something else is wrong.

Switch to the default topic

Return to the application and try to switch to the default Sencha style (Sencha Touch contains the default Sencha style and Ext JS is the Neptune topic ).

Can I work? If yes, the problem is in the Custom style.

Still not working? At least we can know that the custom style is correct. This may be an error caused by nesting or an incorrect layout.

Component Query

If you want to know whether the component query is faulty, you can easily verify it in the browser's developer tool console:

Ext.ComponentQuery.query('button[action="test"]');

Is an empty array returned? If yes, the problem is here! Or the component is returned, but the query time is incorrect. This kind of thing often happens when processing callback. When the code is being executed, the component may not be rendered to the screen.

Common Debugging techniques

As a developer, it is common to encounter bugs or problems that need to be solved. The key is what tools can be used to make this challenging, right?

In addition to the technology mentioned above, there are also several standard skills. First, you must understand the tools used by the framework. Read the API documentation (or further, the source code of the browser framework ).

Switch the framework to one of the debugging frameworks. In this way, you can view additional log information and read the Framework Code directly. For the Sencha Touch project, open the app. json file and temporarily modify the framework:

"js": [    {        "path": "../touch/sencha-touch-all-debug.js",        "x-bootstrap": true    }, 

For the Ext jsproject, open the index.html file and temporarily modify the framework:

<script src="../ext/ext-all-debug.js"></script>

Browser developer tools are also quite useful (Google Chrome or Firebug ). In addition, there are some convenient plug-ins specifically designed for Sencha: illumination and Sencha App Inspector.

To quickly design the prototype, try Sencha Fiddle.

There are a large number of tools available for testing, such as Siesta.

Last but not least, if none of the above tools can help, and you have been staring at your code for several hours, please ...... Take a break! Usually, you can relax your mind when you are resting, and you may immediately solve the problem. Especially when you make spelling or typing mistakes (case-insensitive), this will put you down for a few hours, because you will ignore them.

Need more help? Learn about Sencha Ext JS or Sencha Touch training courses around the world, or take online courses.

Author: Lee Boonstra
Lee is a technical trainer at Sencha. she's located in Amsterdam and has experience in both front-end and back-end development. lee sponds her spare time developing web and mobile apps. she is writing a cookbook for O 'Reilly about Sencha Touch.