Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: f14ea863f2
Fetching contributors…

Cannot retrieve contributors at this time

304 lines (292 sloc) 10.619 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.onTextw3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Toggle Slide Demo - Blue Theme</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
<!-- <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/xtheme-access.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/xtheme-gray.css" /> -->
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/xtheme-blue.css" />
<link rel="stylesheet" href="resources/css/toggle-slide.css" type="text/css" media="screen" charset="utf-8" />
<!-- <link rel="stylesheet" href="resources/css/toggle-slide-access.css" type="text/css" media="screen" charset="utf-8" /> -->
<style type="text/css">
body {
padding: 20px;
font: normal normal normal 14px/normal arial, tahoma, verdana, helvetica;
}
th {
text-align: right;
padding: 8px;
padding-right: 15px;
vertical-align: top;
width: 225px;
}
.css_sized_container .x-toggle-slide-container {
width: 250px;
}
</style>
<script src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base-debug.js" type="text/javascript" ></script>
<script src="http://extjs.cachefly.net/ext-3.2.1/ext-all-debug.js" type="text/javascript"></script>
<script src="js/ToggleSlide.js" type="text/javascript"></script>
<script src="js/ToggleSlideField.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var disabled = new Ext.ux.ToggleSlide({renderTo: 'disabled', disabled: true});
new Ext.Button({
renderTo: 'button',
text: 'Enable',
height: 25,
width: 50,
handler: function(btn) {
if (disabled.disabled) {
disabled.enable();
btn.setText('Disable');
} else {
disabled.disable();
btn.setText('Enable');
}
}
});
new Ext.ux.ToggleSlide({
renderTo: 'default'
});
new Ext.ux.ToggleSlide({
renderTo: 'default-resize-handle',
resizeHandle: false,
state: true
});
new Ext.ux.ToggleSlide({
renderTo: 'default-on',
onText: 'M',
offText: 'F'
});
new Ext.ux.ToggleSlide({
renderTo: 'css-sized-container',
resizeHandle: false,
state: true,
resizeContainer: false
});
new Ext.ux.ToggleSlide({
renderTo: 'long-tiny',
onText: 'Long Label Text',
offText: 'Short'
});
new Ext.ux.ToggleSlide({
renderTo: 'beforechange',
state: true,
listeners: {
beforechange: function(toggle, state) {
return confirm('Toggle to ' + state + '?');
}
}
});
new Ext.ux.ToggleSlide({
renderTo: 'onchange-bool-false',
state: true,
booleanMode: false,
listeners: {
change: function(toggle, state) {
Ext.get('status-bool-false').dom.innerHTML = '<b>' + state + '</b>';
},
afterrender: function(toggle) {
Ext.get('status-bool-false').dom.innerHTML = '<b>' + toggle.getValue() + '</b>';
}
}
});
var toggle = new Ext.ux.ToggleSlide({
renderTo: 'onchange',
listeners: {
change: function(toggle, state) {
Ext.get('status').dom.innerHTML = '<b>' + state + '</b>';
},
afterrender: function(toggle) {
Ext.get('status').dom.innerHTML = '<b>' + toggle.getValue() + '</b>';
}
}
});
Ext.TaskMgr.start({
run: function() {toggle.toggle();},
interval: 3000
});
var tbar = {
items: [{
text: 'Default:',
xtype: 'tbtext'
},{
xtype: 'toggleslide'
},'|',{
text: 'Small Handle:',
xtype: 'tbtext'
},{
xtype: 'toggleslide',
state: true,
resizeHandle: false
},'|',{
text: 'Single Char:',
xtype: 'tbtext'
},{
xtype: 'toggleslide',
onText: 'y',
offText: 'n'
},'|',{
text: 'Small Handle:',
xtype: 'tbtext'
},{
xtype: 'toggleslide',
onText: 'y',
offText: 'n',
state: true,
resizeHandle: false
} ,'->',{
text: 'Long labels:',
xtype: 'tbtext'
},{
xtype: 'toggleslide',
onText: 'On label text',
offText: 'Off label text',
resizeHandle: false
}]
};
new Ext.Panel({
title: 'Toolbar/Menu Toggles',
tbar: tbar,
renderTo: 'panel',
height: 100,
width: 800
});
var simple = new Ext.FormPanel({
id: 'form-demo',
renderTo: 'form',
title: 'Form Toggles',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 400,
labelWidth: 125,
buttonAlign: 'center',
defaultType: 'toggleslidefield',
items: [{
fieldLabel: 'Default',
name: 'default'
},{
fieldLabel: 'Small handle',
name: 'smallHandle',
resizeHandle: false,
state: true
},{
fieldLabel: 'Single char labels',
name: 'singleCharLables',
onText: 'Y',
offText: 'N',
resizeHandle: true
},{
fieldLabel: 'Single char labels',
name: 'singleCharLabelsNotResized',
onText: 'Y',
offText: 'N',
resizeHandle: false,
state: true
},{
fieldLabel: 'Long labels',
name: 'longLabels',
onText: 'On label text',
offText: 'Off label text',
booleanMode: false,
resizeHandle: false
},{
fieldLabel: 'Boolean mode off',
name: 'booleanModeOff',
booleanMode: false,
state: true
}],
buttons: [{
text: 'Post',
handler: function() {
var form = Ext.getCmp('form-demo');
var fieldValues = [];
form.items.each(function(item) {
fieldValues.push(item.getName() + ': ' + item.getValue());
});
Ext.Msg.alert('Post fields', fieldValues.join('<br>'));
}
}]
});
});
</script>
</head>
<body>
<table>
<tr class="disabled">
<th><label for="disabled">Disabled</label></th>
<td>
<div id="disabled"/>
<div style="float:right; margin-right:95px; margin-top:3px" id="button"/>
</td>
</tr>
<tr class="on_off">
<th><label for="on_off">Default</label></th>
<td>
<div id="default"/>
</td>
</tr>
<tr class="on_off">
<th><label for="on_off">Don't resize handle</label></th>
<td>
<div id="default-resize-handle"/>
</td>
</tr>
<tr class="on_off">
<th><label for="on_off_on">Default On</label></th>
<td>
<div id="default-on"/>
</td>
</tr>
<tr class="css_sized_container">
<th><label for="css_sized_container">CSS Sized Container and Handle</label></th>
<td>
<div id="css-sized-container"/>
</td>
</tr>
<tr class="long_tiny">
<th><label class="left" for="long_tiny">Long and short labels</label></th>
<td>
<div id="long-tiny"/>
</td>
</tr>
<tr class="onchange">
<th>Event tracking - Before Change</th>
<td>
<div id="beforechange"></div>
</td>
</tr>
<tr class="onchange">
<th>Event tracking - Change</th>
<td>
<div id="onchange"/>
<div style="float:right; margin-top:8px; width:140px">Current value: <strong><span id="status">...</span></strong></div>
</td>
</tr>
<tr class="onchange">
<th>Event tracking - Boolean Mode Off</th>
<td>
<div id="onchange-bool-false"/>
<div style="float:right; margin-top:8px; width:140px;">Current value: <strong><span id="status-bool-false">...</span></strong></div>
</td>
</tr>
</table>
<table>
<tr class="onchange">
<th>Toolbar Toggles</th>
<td>
<div id="panel"></div>
</td>
</tr>
<tr class="onchange">
<th>Form Field Toggles</th>
<td>
<div id="form"></div>
</td>
</tr>
</table>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.