http://docs.jquery.com/Tutorials:Using_Ext_With_jQuery
Here's a really quick'n'dirty how-to for others who want to jumpstart Ext with jQuery:
1.Download Ext: (Just click the big blue button for now. There is also a feature that lets you build your own Ext with just the features you need, but we'll ignore that for now).
2.Unzip the package, it contains Ext-wise everything you need.
3.Fire up the page you want to start toying with in your editor of preference.
4.Include the javascrīpt-files in the right order
- jquery.js
- other possible jquery-plugins you might want to use
- the Ext jQuery Plugin scrīpt. This is in your ext-directory which you just uncompressed earlier, at ext-1.0.1/adapter/jquery/jquery-plugins.js
- the Ext jQuery Adapter scrīpt. This is in your ext-directory which you just uncompressed earlier, at ext-1.0.1/adapter/jquery/ext-jquery-adapter.js
- Include the main Ext javascrīpt-file, ext-1.0.1/ext-all.js
5.Include the necessary css-eye-candy. Please note that the Ext css-files reference images inside the ext-folder, so I wouldn't carelessly move them around.
- The ext base css from: ext-1.0.1/resources/css/ext-all.css
- Pick a theme, for Dark Vista: ext-1.0.1/resources/css/ytheme-vista.css (there is also ytheme-aero.css and ytheme-gray.css, didn't try em out yet).
6.To test this you can just skip the tutorial and jump right into mixing jQuery with Ext: Add the html:
<a href="#" id="wheelink">Whee Click me Click me!</a>
Add the JS:
$(document).ready(function(){
$('#wheelink').bind('click',function() {
Ext.Msg.alert('Whee alert!', 'Thanks for clicking me, WHEE!');
});
});
下面是实例：
//--------------html文件，注意引用了那些js文件以及引用的顺序----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/ext-jquery-adapter.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/adapter/jquery/jquery-plugins.js"></scrīpt>
<scrīpt type="text/javascrīpt" src="js/ext-all.js"></scrīpt>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css">
<scrīpt type="text/javascrīpt" src="1.js"></scrīpt>
</head>
<body>
<p> </p>
<p>usr
<input name="usr" type="text" id="usr" />
</p>
<p>txt
<textarea name="txt" id="txt"></textarea>
</p>
<p>
<input type="checkbox" name="checkbox1" id="chk1" value="-chk1" />
chk1
<input type="checkbox" name="checkbox2" id="chk2" value="-chk2" />
chk2</p>
<p>
<label>
<input type="radio" name="radio" id="rd1" value="-rd1" />
1</label>
<br />
<label>
<input type="radio" name="radio" id="rd2" value="-rd2" />
2</label>
</p>
<p>sel
<select name="sel" size="5" id="sel">
<option value="-sel1" selected="selected">1</option>
<option value="-sel2">2</option>
<option value="-sel3">3</option>
</select>
</p>
<p><br />
<input type="button" name="btn" id="btn_get" value="get" />
<input type="button" name="btn" id="btn_set" value="set" />
</p>
</body>
</html>
//----------------------1.js ------------------------------------
$(document).ready
(
function()
{
var title=$("input[@type=radio][@checked]").attr("value");
Ext.Msg.confirm(title);//显示选择的radion的值
}
