Skip to content

Instantly share code, notes, and snippets.

@vifo

vifo/gist:1709257

Created January 31, 2012 06:38
Show Gist options
  • Save vifo/1709257 to your computer and use it in GitHub Desktop.
Save vifo/1709257 to your computer and use it in GitHub Desktop.
Download ZIP
ExtJS 3.4.0 suspend event handlers.
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello world</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
html,body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>
<script type="text/javascript" src="http://cdn.sencha.io/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://cdn.sencha.io/ext-3.4.0/ext-all-debug.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
/* will be called, if saved searches combobox is clicked */
function doSelectSavedSearch() {
console.log(">>> doSelectSavedSearch");
/* suspend event handlers, so clicking checkbox won't fire event handlers */
Ext.getCmp('el-checkbox-show-params').suspendEvents(false);
Ext.getCmp('el-checkbox-show-params').setValue(true);
/* resume event handlers */
Ext.getCmp('el-checkbox-show-params').resumeEvents();
/* create additional search fields on-the-fly */
createSearchParamsFields();
console.log("<<< doSelectSavedSearch");
}
/* this will create additional search fields on-the-fly */
function createSearchParamsFields() {
console.log(">>> createSearchParamsFields");
var form = Ext.getCmp("el-form-1");
var textField = form.getForm().findField("el-text-search-parameters");
/* if form does not contain search parameters yet, add text box */
if (! textField) {
var textField = new Ext.form.TextField({
name: "el-text-search-parameters",
label: "Erweiterte Parameter"
});
Ext.getCmp("el-form-1").add(textField);
Ext.getCmp("el-form-1").doLayout();
}
else {
console.log("el-text-search-parameters bereits vorhanden");
}
console.log("<<< createSearchParamsFields");
}
/* init */
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
id: 'el-form-1',
applyTo: 'el-form-1',
title: 'Form1',
width: 500,
frame: true,
items: [
{
id: 'el-combo-saved-searches',
xtype: 'combo',
fieldLabel: 'Gespeicherte Suche',
store: new Ext.data.ArrayStore({
fields: ['angezeigterName', 'suchParameter'],
data: [
[ "A", "Wert A" ],
[ "B", "Wert B" ],
[ "C", "Wert C" ]
]
}),
valueField: 'suchParameter',
displayField: 'angezeigterName',
typeAhead: true,
mode: 'local',
emptyText: 'Wählen Sie eine Suche...',
selectOnFocus: true
},
{
id: 'el-checkbox-show-params',
xtype: 'checkbox',
fieldLabel: 'Suchparameter anzeigen'
}
]
});
/* install event handler for checkbox */
Ext.getCmp('el-checkbox-show-params').on('check', function(){
console.log('el-checkbox-show-params: onCheck called. Rufe createSearchParamsFields auf');
createSearchParamsFields();
});
/* install event handler for saved seaches combobox */
Ext.getCmp('el-combo-saved-searches').on('select', doSelectSavedSearch);
});
/* ]]> */
</script>
</head>
<body>
<div style="padding: 10px; width: 300px; margin: 10px;">
<div id="el-form-1"></div>
</div>
<div style="padding: 10px; width: 300px; margin: 10px;">
<div id="el-button-1"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment