- Ext JS 3.0 Cookbook
- Jorge Ramon
- 324字
- 2021-04-01 13:43:43
Acquiring references to Ext JS components
As Ext JS is all about working with components, it's essential to learn how to acquire a reference to any component in your code. For example, this recipe shows how easy it is to reference a ComboBox component.
How to do it...
You can reference a ComboBox component as shown in the following code:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="../ext/css/ext-all.css"/>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript"
src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/images/default/s.gif';
Ext.onReady(function() {
var colorsStore = new Ext.data.SimpleStore({
fields: ['name'],
data: [['Blue'],['Red'],['White']]
});
var combo = new Ext.form.ComboBox({
store: colorsStore,
displayField: 'name',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a color...',
selectOnFocus: true,
applyTo: 'colors-combo',
id: 'colors-combo'
});
// Get a reference to the combobox using Ext.getCmp(id).
var combo = Ext.getCmp("colors-combo");
// Using the reference to the combo, add a handler to the
//'select' event.
combo.on('select', function() {
Ext.Msg.alert('Using Ext.getCmp(id)',
The selected color is ' + combo.getValue();
});
});
</script>
</head>
<body>
<input type="text" id="colors-combo"/>
</body>
</html>
How it works...
References to components are obtained using the Ext.getCmp(id) function, where id is the ID of the component. Keeping track of components is possible, thanks to the ComponentMgr class. It provides for easy registration, un-registration and retrieval, as well as notifications when components are added or removed.
There's more...
This method is particularly useful when explicit component references do not already exist in your code, for example when components are defined as part of the items collection of a container. (Think of a tab panel and its tabs, or a border layout and its contained panels.)
There are other DOM and component utilities provided by Ext JS:
Ext.getBody()returns the body of the document as anExt.ElementExt.getDoc()returns the current HTML document as anExt.ElementExt.getDom(id)returns the DOM node for the supplied ID, DOM node, or element
See also...
- The Retrieving DOM nodes and elements recipe, covered earlier in this chapter, explains how to get a handle on any DOM element.
- The next recipe, Running high-performance DOM queries, teaches you about running queries against the DOM.
- 現代企業應用設計指南
- CorelDRAW X6圖形設計立體化教程
- Animate 2022動畫制作：團體操隊形
- CorelDRAW X5實用教程（第2版）
- 中文版Photoshop CC平面設計實用教程
- Premiere pro CC中文版自學視頻教程
- Photoshop CC摳圖＋修圖＋調色＋合成＋特效實戰視頻教程
- 高等院校電腦美術教材：CorelDRAW X7中文版基礎教程
- 用Multisim玩轉電路仿真
- Mastering Zabbix
- 蝶變：移動用戶體驗設計之道
- Cinema 4D基礎與實戰教程
- 中文版Photoshop CS5基礎培訓教程（移動學習版）
- Mobile Web Development
- Building Enterprise Ready Telephony Systems with sipXecs 4.0