How to add images to a button in sencha touch extjs

Recently, I have been studying sencha toucn API, a suite for mobile device development. developed programs are deployed on Web Services and opened in a browser on a mobile device to support touch screen operations, its operation experience is almost the same as that of a local application, and the interface is also very exquisite. I tried it on an iPhone, and the experience was very good. I tried it on an android simulator, and the effect was not as smooth as that on the iPhone, but in general, it is quite good.

 

The app on the iPhone also has a special feature. When you open the page for the first time in Safari, after the page is successfully opened, you can add the page to the main screen, at this time, an application icon will be generated on your iPhone home screen, which can be defined by yourself. Then you can use this program like a general iPhone application without remembering the link address.

 

The red circle in the figure is the Web application added to the home screen in this way. Clicking it actually opens a Web page. What's more interesting is that the iPhone is very interesting.
The open web page does not display the safari interface, which makes you feel like a local application.

 

 

For more information about sencha touch, visit the following website. You can even use your mobile phone to open the demo page of this website to see the effect.

Address: www.sencha.com

 

Let's get down to the truth. Here I want to talk about how to add a button image under sencha touch. extjs is believed to be a lot of users, so it is not necessary to say it is powerful, however, when I learned to write a code about the button application under sencha touce (hereinafter referred to as St), the problem that has plagued me for a long time is like adding images to a button, I rummaged through many tutorials and examples on the Internet and repeatedly checked the help documentation of the interfaces provided by St. After all, the problem could not be solved. I inserted the code one by one according to the help documentation and online examples, the specified image is not displayed.

 

On the left side, I want to display the final button effect, and on the right side, I get the result. The following is the button code I defined:

 

 

 

This. Button = new Ext. Button ({

Text: '', UI: 'action', iconcls: 'bmw_small.png ', Handler: This. tapme, maxheight: 64, maxwidth: 64

});

 

 

According to the official help documentation, there are two ways to add images to the button: Setting the attribute icon and setting the iconcls, both of which achieve the setting effect by setting the background image of the button, however, I cannot solve the problem even if I set it. Then I began to analyze the ext code and found the code snippet for defining the button. The following definitions were found:

 

Ext. Button = ext. Extend (ext. component ,{

......

 

 

......

......

 

})

 

The Code shows that when we create a button, ext creates an IMG for our button, and the image data of this IMG is Ext. then I went to look for Ext. the following definition is found for the definition of blank_image_url:

 

I tried to export the image data to another file to see what it was. There was nothing left blank and the name was defined as scheduled, however, I tried to replace the original definition with a "/transform" in the encoding of the image data. Of course, I will not modify the official code, so I added this line of definition to my own test code:

 

 

Save the code and execute the program. The picture is finally displayed! This shows that the previous problems are all caused by the definition of the blank image. Therefore, you can run the Code with the toolbar and tab, check whether the modification will affect other components. The result is okay and no exception is found. Thank God, the problem seems to have been solved.

 

At last, the effect of defining multiple buttons is attached. The code for defining the buttons is as follows:

 

 

The corresponding style sheet is defined as follows:

 

 

The display effect is as follows: