ext 2.0 Combos 使用指南

这是个简单的例子,只需要简单的解释下,按步就班,从简单到复杂!

例子由两部分组成: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>
<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 2.0 Linked Combos Tutorial
* by Jozef Sakalos, aka Saki
* extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2
*/
// reference local blank image
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' ]
];
// create application
LCombo.app = function () {
// do NOT access DOM from here; elements don't exist yet
// private variables
// private functions
// public space
return {
// public methods
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:''
}]
});
}
};
}(); // end of app
// end of file

ext 2.0 Combos 使用指南相关推荐

TensorFlow 2.0 快速入门指南 | iBooker·ApacheCN
原文:TensorFlow 2.0 Quick Start Guide 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译不要担心自己的形象,只关心如何实现目标.--<原则>,生活 ...
VMware-vRealize-Log-Insight-8.2.0.0安装部署指南
VMware-vRealize-Log-Insight-8.2.0.0安装部署指南 https://blog.csdn.net/u011775882/article/details/110928142 ...
[Ext]2.0探索(七)Grid使用介绍
[Ext]2.0探索(七)Grid使用介绍 2008年07月01日星期二 15:25 Ext2.0框架的Grid使用介绍最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强& ...
Scratch 3.0建站指南（一）
Scratch 3.0建站指南(一) Scratch 3.0已经到来 Scratch3.0 的用户界面发生了很大的改变,更便于使用和学习: 接下来的内容中我们就讨论一下如何针对Scratch 3.0进 ...
Flowable 6.6.0 BPMN用户指南 -10 流程实例迁移 - 10.1 简单示例
Flowable 6.6.0 用户指南相关文档下载 BPMN用户指南第一部分 - 中文PDF精编版 BPMN用户指南第二部分 - 中文PDF精编版 BPMN用户指南第三部分 - 中文PDF精编版 ...
Flowable 6.6.0 BPMN用户指南 - (5)Spring Boot - 5.8 Flowable应用属性
Flowable 6.6.0 用户指南相关文档下载 BPMN用户指南第一部分 - 中文PDF精编版 BPMN用户指南第二部分 - 中文PDF精编版 BPMN用户指南第三部分 - 中文PDF精编版 ...
Windows中编译wireshark3.0以上版本指南
Windows中编译wireshark3.0以上版本指南一.摘要在网上已有的wireshark编译的网页文档中,只有编译wireshark1.0和wireshark2.0相关版本的内容,对于已经发 ...
三分钟看懂高速USB3.0 PCB设计指南
高速USB3.0 PCB设计指南本文主要讲解USB3.0接口的PCB设计,通过理论分析以及案例的解剖,希望大家看了此文章能轻松的应对各种USB3.0方案的PCB设计. 简介 USB 3.0可提供高达 ...
Scratch 3.0建站指南（三）课程管理
Scratch 3.0建站指南(三)课程管理线下机构是否需要针对线上进行课程管理? 1.是否需要将线上作为一种获客来源 2.是否需要线上课程为线下授课提供支持 3.是否需要一种在授课时间以外的与学生 ...

ext 2.0 Combos 使用指南

ext 2.0 Combos 使用指南相关推荐

最新文章

热门文章