Permalink
Browse files

Initial version

  • Loading branch information...
0 parents commit 3d8eab30d10e0e964ffa539ae0f263f1889ce16c @mitchellsimoens committed Mar 11, 2011
Showing with 106 additions and 0 deletions.
  1. +32 −0 App.js
  2. +21 −0 Ext.touch.SegmentedButton.css
  3. +34 −0 Ext.touch.SegmentedButton.js
  4. 0 README.md
  5. +19 −0 index.html
@@ -0,0 +1,32 @@
+Ext.setup({
+ onReady: function() {
+ var p = new Ext.Panel({
+ renderTo: Ext.getBody(),
+ height: 200,
+ width: 400,
+ padding: 10,
+ dockedItems : {
+ xtype : "toolbar",
+ dock : "top",
+ title: "Segmented Button"
+ },
+ items : [
+ {
+ xtype : "ext.touch.segmentedbutton",
+ direction: "vertical",
+ items : [
+ {
+ text: 'Option 1'
+ },
+ {
+ text: 'Option 2'
+ },
+ {
+ text: 'Option 3'
+ }
+ ]
+ }
+ ]
+ });
+ }
+});
@@ -0,0 +1,21 @@
+.x-segmentedbutton-v .x-button {
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ margin: 0;
+}
+.x-segmentedbutton-v .x-button:first-child {
+ -webkit-border-top-left-radius: 0.4em;
+ border-top-left-radius: 0.4em;
+ -webkit-border-top-right-radius: 0.4em;
+ border-top-right-radius: 0.4em;
+}
+
+.x-segmentedbutton-v .x-button:last-child {
+ -webkit-border-bottom-left-radius: 0.4em;
+ border-bottom-left-radius: 0.4em;
+ -webkit-border-bottom-right-radius: 0.4em;
+ border-bottom-right-radius: 0.4em;
+}
+.x-segmentedbutton-v .x-button:not(:first-child) {
+ border-top: 0;
+}
@@ -0,0 +1,34 @@
+Ext.ns("Ext.touch");
+Ext.touch.SegmentedButton = Ext.extend(Ext.SegmentedButton, {
+ direction : "horizontal",
+
+ componentClsVert: "x-segmentedbutton-v",
+
+ initComponent : function() {
+ var me = this;
+
+ if (me.direction === "vertical") {
+ Ext.apply(me, {
+ componentCls : me.componentClsVert || "x-segmentedbutton-v",
+ layout : {
+ type : "vbox",
+ align : "stretch"
+ }
+ });
+
+ var i = 0,
+ items = me.items,
+ ln = items.length,
+ item;
+
+ for (; i < ln; i++) {
+ item = items[i];
+ item.flex = item.flex || 1;
+ }
+ }
+
+ Ext.touch.SegmentedButton.superclass.initComponent.call(me);
+ }
+});
+
+Ext.reg("ext.touch.segmentedbutton", Ext.touch.SegmentedButton);
No changes.
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Sencha Touch Improved Segmented Button</title>
+
+ <link rel="stylesheet" href="/sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
+ <script type="text/javascript" src="/sencha-touch-1.1.0/sencha-touch-debug.js"></script>
+
+ <link rel="stylesheet" href="Ext.touch.SegmentedButton.css" type="text/css">
+ <script type="text/javascript" src="Ext.touch.SegmentedButton.js"></script>
+
+ <script type="text/javascript" src="App.js"></script>
+</head>
+
+<body>
+</body>
+
+</html>

0 comments on commit 3d8eab3

Please sign in to comment.