Permalink
Browse files

Adding some new examples

Adding new  examples to be blogged and a repo Icon for Tower.

Signed-off-by: Peter deHaan (Sencha) <peter.dehaan@sencha.com>
  • Loading branch information...
Peter deHaan (Sencha)
Peter deHaan (Sencha) committed Feb 21, 2012
1 parent 0431b17 commit b617bcd7e4b14bb19ca864de4476430244e1ddf3
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Ext.Array.clean() Example</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.application({
+ name: 'Ext.Array.clean()',
+ launch: function() {
+ /* Create two arrays. The 'dirty' array contains empty items. The 'clean' array filters empty items using the static Ext.Array.clean() method. */
+ var dirty = [1,2,,,4,5,6,7,,,11],
+ clean = Ext.Array.clean(dirty);
+
+ /* Create a panel to display the output. */
+ Ext.create('Ext.Panel', {
+ id: 'pan',
+ title: 'Ext.Array.clean() Example',
+ // width: '100%',
+ height: 200,
+ bodyPadding: 10,
+ padding: 20,
+ html: '<p><code>dirty</code> array (' + dirty.length + ' items): ' + JSON.stringify(dirty) + '</p>' + '<p><code>clean</code> array (' + clean.length + ' items): ' + JSON.stringify(clean) + '</p>',
+ renderTo: Ext.getBody()
+ }); // Ext.create()
+ } // launch
+ }); // Ext.application()
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Creating a self closing alert in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function() {
+ Ext.create('Ext.Button', {
+ text:'Click to launch alert',
+ handler:function (lbl) {
+ var alrt = Ext.Msg.alert("Self closing alert", "This alert will close in 3 seconds");
+ setTimeout(function (tgt) {
+ if (!tgt.hidden) {
+ console.log("closing alert");
+ tgt.close();
+ } else {
+ console.log("already closed");
+ }
+ }, 3000, alrt);
+ },
+ renderTo:Ext.getBody()
+ });
+ });
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title></title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function() {
+ var numClicks = 0;
+ Ext.create('Ext.Button', {
+ text: 'Click to relaunch alert',
+ handler: function() {
+ Ext.Msg.alert('Status title', 'Alert was relaunched ' + (++numClicks) + " times.");
+ }, // listeners
+ renderTo: Ext.getBody()
+ }); // create()
+ Ext.Msg.alert('Status title', 'I am an Ext.Msg.alert()');
+ }); // onReady()
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Creating a simple MessageBox in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function () {
+ Ext.create('Ext.Panel', {
+ tbar: [{
+ xtype: 'button',
+ text: 'Ext.Msg.CANCEL',
+ handler: function () {
+ showMsg(Ext.Msg.CANCEL);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.NO',
+ handler: function () {
+ showMsg(Ext.Msg.NO);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.OK',
+ handler: function () {
+ showMsg(Ext.Msg.OK);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.OKCANCEL',
+ handler: function () {
+ showMsg(Ext.Msg.OKCANCEL);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.YES',
+ handler: function () {
+ showMsg(Ext.Msg.YES);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.YESNO',
+ handler: function () {
+ showMsg(Ext.Msg.YESNO);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.YESNOCANCEL',
+ handler: function () {
+ showMsg(Ext.Msg.YESNOCANCEL);
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.NO|Ext.Msg.CANCEL|Ext.Msg.OK',
+ handler: function () {
+ showMsg(Ext.Msg.NO | Ext.Msg.CANCEL | Ext.Msg.OK);
+ }
+ }],
+ renderTo: Ext.getBody()
+ });
+ });
+
+ function showMsg(btns) {
+ Ext.Msg.show({
+ title: 'Ext.Msg.buttons example',
+ msg: '<code>buttons: ' + btns + '</code>',
+ buttons: btns
+ });
+ }
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Creating a simple MessageBox in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function () {
+ var ch = Ext.create('Ext.form.Checkbox', {
+ boxLabel: 'closable',
+ renderTo: Ext.getBody()
+ });
+ Ext.create('Ext.Button', {
+ text: 'Click to launch MessageBox',
+ handler: function () {
+ Ext.Msg.show({
+ title: 'Ext.Msg.show() example',
+ msg: '<code>closable: ' + ch.value + '</code>',
+ closable: ch.value,
+ buttons: Ext.Msg.OK
+ });
+ },
+ renderTo: Ext.getBody()
+ });
+ });
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Creating a simple MessageBox in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function () {
+ Ext.create('Ext.Button', {
+ text: 'Click to launch MessageBox',
+ handler: function () {
+ var msg = Ext.Msg.show({
+ title: 'Ext.Msg.setIcon() example',
+ msg: 'This example will change the displayed icon after 3 seconds.',
+ icon: Ext.Msg.INFO
+ });
+ setTimeout(function (ico) {
+ msg.setIcon(ico);
+ }, 3000, Ext.Msg.ERROR);
+ },
+ renderTo: Ext.getBody()
+ });
+ });
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Setting the icon on a MessageBox in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function () {
+ Ext.create('Ext.Panel', {
+ tbar: [{
+ xtype: 'button',
+ text: 'Ext.Msg.ERROR',
+ handler: function () {
+ showMessage('ERROR');
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.INFO',
+ handler: function () {
+ showMessage('INFO')
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.QUESTION',
+ handler: function () {
+ showMessage('QUESTION')
+ }
+ }, {
+ xtype: 'button',
+ text: 'Ext.Msg.WARNING',
+ handler: function () {
+ showMessage('WARNING')
+ }
+ }],
+ renderTo: Ext.getBody()
+ });
+ });
+
+ function showMessage(ico) {
+ Ext.Msg.show({
+ title: 'Ext.window.MessageBox icon example',
+ msg: '<code>icon: Ext.Msg.' + ico + '</code>',
+ icon: Ext.Msg[ico]
+ });
+ }
+ </script>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Creating a simple MessageBox in Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function () {
+ Ext.create('Ext.Button', {
+ text: 'Click to launch MessageBox',
+ handler: function () {
+ Ext.Msg.show({
+ title: 'Ext.Msg.show() example',
+ msg: 'Are you sure you want to delete The Internet?<br/><br/>This action cannot be undone.'
+ });
+ },
+ renderTo: Ext.getBody()
+ });
+ });
+ </script>
+
+</body>
+</html>
View
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <link rel="stylesheet" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
+ <title>Determining the user's platform using Ext JS</title>
+</head>
+<body>
+
+ <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
+ <script type="text/javascript">
+ Ext.onReady(function() {
+ var platformStore = Ext.create('Ext.data.Store', {
+ fields:['name', 'value'],
+ data:{items:[
+ {name:'Ext.is.Android:', value:Ext.is.Android},
+ {name:'Ext.is.Blackberry:', value:Ext.is.Blackberry},
+ {name:'Ext.is.Desktop:', value:Ext.is.Desktop},
+ {name:'Ext.is.Linux:', value:Ext.is.Linux},
+ {name:'Ext.is.Mac:', value:Ext.is.Mac},
+ {name:'Ext.is.Phone:', value:Ext.is.Phone},
+ {name:'Ext.is.Standalone:', value:Ext.is.Standalone},
+ {name:'Ext.is.Tablet:', value:Ext.is.Tablet},
+ {name:'Ext.is.Windows:', value:Ext.is.Windows},
+ {name:'Ext.is.iOS:', value:Ext.is.iOS},
+ {name:'Ext.is.iPad:', value:Ext.is.iPad},
+ {name:'Ext.is.iPhone:', value:Ext.is.iPhone},
+ {name:'Ext.is.iPod:', value:Ext.is.iPod}
+ ]},
+ proxy: {
+ type: 'memory',
+ reader: {
+ type: 'json',
+ root: 'items'
+ }
+ }
+ });
+
+ Ext.create('Ext.grid.Panel', {
+ title: 'Ext.is example',
+ store: platformStore,
+ columns: [
+ {header:'Name', dataIndex:'name'},
+ {header:'Value', dataIndex:'value', flex:1}
+ ],
+ height: 200,
+ width: 400,
+ renderTo: Ext.getBody()
+ });
+ });
+ </script>
+
+</body>
+</html>
View
@@ -0,0 +1,5 @@
+The following example shows how you can determine the current platform the application is running on using the static properties in the <code>Ext.is</code> class.
+
+---
+
+For more information, see [SenchaExamples.com](http://senchaexamples.com).
@@ -0,0 +1,5 @@
+The following example shows how you can determine the current platform the application is running on using the static properties in the <code>Ext.is</code> class.
+
+---
+
+For more information, see [SenchaExamples.com](http://senchaexamples.com).
Oops, something went wrong.

0 comments on commit b617bcd

Please sign in to comment.