生活随笔
收集整理的這篇文章主要介紹了
ext 2.0 Combos 使用指南
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這是個簡單的例子,只需要簡單的解釋下,按步就班,從簡單到復雜!
例子由兩部分組成:lcombo.html 和 lcombo.js.
lcombo.html
view plain copy to clipboard print ?
<!DOCTYPE?HTML?PUBLIC? "-//W3C//DTD?HTML?4.01?Transitional//EN" ??? ????"http://www.w3.org/TR/html4/loose.dtd" >?? <html>?? <head>?? ????<meta?http-equiv="Content-Type" ?content= "text/html;?charset=utf-8" >?? ????<link?rel="stylesheet" ?type= "text/css" ?href= "../extjs-2.0/resources/css/ext-all.css" >?? ????<script?type="text/javascript" ?src= "../extjs-2.0/adapter/ext/ext-base.js" ></script>?? ????<script?type="text/javascript" ?src= "../extjs-2.0/ext-all-debug.js" ></script>?? ????<script?type="text/javascript" ?src= "lcombo.js" ></script>?? ????<!--?A?Localization?Script?File?comes?here?-->?? ????<script?type="text/javascript" >?? ????????Ext.onReady(LCombo.app.init,?LCombo.app);?? ????</script>?? ????<title>Linked?Combos?Example</title>?? </head>?? <body>?? </body>?? </html>??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css"><script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script><script type="text/javascript" src="lcombo.js"></script><!-- A Localization Script File comes here --><script type="text/javascript">Ext.onReady(LCombo.app.init, LCombo.app);</script><title>Linked Combos Example</title>
</head>
<body>
</body>
</html>
這是ext運用的最小html!
不要忘記改變ext類庫和資源的引用來部署你的ext!
lcombo.js
view plain copy to clipboard print ?
? ? ? ? ?? ??? ?? Ext.BLANK_IMAGE_URL?=?'../extjs-2.0/resources/images/default/s.gif' ;?? ??? Ext.namespace('LCombo' ,? 'LCombo.countries' ,? 'LCombo.cities' );?? ??? LCombo.countries?=?[?? ?????['USA' ,? 'United?States?of?America' ]?? ????,['D' ,? 'Germany' ]?? ????,['F' ,? 'France' ]?? ????,['GB' ,? 'Great?Britain' ]?? ];?? ??? LCombo.cities?=?[?? ?????[1,?'USA' ,? 'New?York' ]?? ????,[2,?'USA' ,? 'Cleveland' ]?? ????,[3,?'USA' ,? 'Austin' ]?? ????,[4,?'USA' ,? 'Los?Angeles' ]?? ????,[5,?'D' ,? 'Berlin' ]?? ????,[6,?'D' ,? 'Bonn' ]?? ????,[7,?'F' ,? 'Paris' ]?? ????,[8,?'F' ,? 'Nice' ]?? ????,[9,?'GB' ,? 'London' ]?? ????,[10,?'GB' ,? 'Glasgow' ]?? ????,[11,?'GB' ,? 'Liverpool' ]?? ];?? ??? ?? LCombo.app?=?function ()?{?? ???? ?? ??? ???? ?? ??? ???? ?? ??? ???? ?? ????return ?{?? ??? ???????? ?? ????????init:?function ()?{?? ????????????var ?form?=? new ?Ext.FormPanel({?? ?????????????????renderTo:document.body?? ????????????????,width:?400?? ????????????????,height:?300?? ????????????????,style:'margin:16px' ?? ????????????????,bodyStyle:'padding:10px' ?? ????????????????,title:'Linked?Combos' ?? ????????????????,defaults:?{xtype:'combo' }?? ????????????????,items:[{?? ?????????????????????fieldLabel:'Select?Country' ?? ????????????????????,displayField:'country' ?? ????????????????????,valueField:'cid' ?? ????????????????????,store:?new ?Ext.data.SimpleStore({?? ?????????????????????????fields:['cid' ,? 'country' ]?? ????????????????????????,data:LCombo.countries?? ????????????????????})?? ????????????????????,triggerAction:'all' ?? ????????????????????,mode:'local' ?? ????????????????????,listeners:{select:{fn:function (combo,?value)?{?? ????????????????????????var ?comboCity?=?Ext.getCmp( 'combo-city' );?????????? ????????????????????????comboCity.setValue('' );?? ????????????????????????comboCity.store.filter('cid' ,?combo.getValue());?? ????????????????????????}}?? ????????????????????}?? ??? ????????????????},{?? ?????????????????????fieldLabel:'Select?City' ?? ????????????????????,displayField:'city' ?? ????????????????????,valueField:'id' ?? ????????????????????,id:'combo-city' ?? ????????????????????,store:?new ?Ext.data.SimpleStore({?? ?????????????????????????fields:['id' ,? 'cid' ,? 'city' ]?? ????????????????????????,data:LCombo.cities?? ????????????????????})?? ????????????????????,triggerAction:'all' ?? ????????????????????,mode:'local' ?? ????????????????????,lastQuery:'' ?? ????????????????}]?? ????????????});?? ????????}?? ????};?? }();? ?? ??? ?
總結
以上是生活随笔為你收集整理的ext 2.0 Combos 使用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
