Defafe

In this tutorial, I just want to give examples of how to use the icon on the button on extjs. I think this is a very simple example, and I’m sure has a lot to know about this. But there is nothing wrong if I write this tutorial, maybe there is not yet known. below is a sample script to create icon on button.

==script in javascript file==

buttons: [{
text:'Submit',
iconCls:'icon-close'

},{
text: 'Close',
iconCls:'icon-close',
handler: function(){
win.hide();
}
}]

“”"iconCls:’icon-close’,” is main of this tutorial. icon-close is name of class icon, and will  load  in html file,

this is a script html file

<STYLE type=”text/css”>
.icon-close
{
background-image:url(database_go.png) !important;
}
</STYLE>

demo

Because of you, I still hold to share knowledge through this blog. These days I am confused what to write on this blog, I have no time to continue my project before. But do not worry, now I want to share knowledge, how to make a completed registration form with a captcha. As we know captcha is necessary to protect the blog or our website from spam.

Registration form is composed of 5 input, ie name, username, passwword, confirm password, email, and spam code. Below are some validation that I use to make this registration form:

1. Each input can not be empty, sourcecode ==> “allowBlank: false”.
2. username: user can only create a username at least 3 characters and maximum of 12 characters, source code ==> Minlength: 3, MaxLength: 12.
3. password: sourcecode ==> inputType: ‘passoword’
4. email validation : sourcecode ==> vtype: ‘email’.

To create spam on the extjs code I use script like below.

xtype:'box',
 autoEl:{
 tag:'img',
 src:'spam.php'
 }

You can download the sourcecode is in the link below.

download | demo

I am sorry when I check back my previous tutorial on uploading files and images, there are some mistakes that should be fixed in its database, and there are some parts that I have not explained clearly. Now I will try to explain again some of which I consider important.

1. On these tutorials you can only upload image files that have extensions gif,  jpeg and png. if you upload a file extension other than the image file, the file will not be able to upload or error.
2. create a folder image and article to store files uploaded.

download this sourcecode , demo this application

form-upload-extjs

Below are some new themes that I took from the extjs forum, you can make the display more interesting applications with extjs these themes.

1. xtheme-indigo this theme created by  elyxr (elyxr is a username in extjs forum).

2. xp-theme-for-extjs this theme created by coolstar (account id in extjs forum).

3. TargetProcessSkin_ext_3 this theme created by firefalcon (account id in extjs forum).

below are example of the use of extjs themes above

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/TargetProcessSkin_ext_3/css/xtheme-tp.css" />

xthem-extjs

In this tutorial, I will give examples of the usage of bar chart by using extjs and php. Generally, bar chart consists of the x-axis and y-axis in this tutorial I will provide a case study about the number of sales in each month, the x-axis represents the name of the month, while the y-axis represents the total sales of each month.

we first create a database with the name of “chart” after that create a table with a “sale”, tables of contents consists of two columns of “month” and “sumOfsel”, for more details on the source code can be seen below.

CREATE TABLE IF NOT EXISTS `sale` (

 `month` int(11) NOT NULL,

 `sumOfsel` int(11) NOT NULL

) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

after create tables, enter data into a table, like the example below:

INSERT INTO `penjualan` (`month`, `sumOfsel`) VALUES

(0, 1400),

(2, 2000),

(3, 4000),

(4, 8000),

(0, 30000),

(1, 5000),

(5, 14686);

(more…)