January 24th, 2012A SenchTouch2 Simple Example Using Tab Pages and Buttons

Again, I find myself going back to basics when trying to make my SenchaTouch2 Project work.  Today, I updated my framework to Sencha’s latest alpha release of the tools (p4).  I often make these examples because I’m trying to prove there is a SenchaTouch bug and usually find out it’s my bug somehow.  So, since I went to the trouble of making a simple example of two stand alone buttons that switch between tab pages, I thought I’d blog it.

Here is what we get ultimately.  When clicking on b1 or b2, the home and the contact tab are selected automatically (same as clicking on those two items in the tab bar).

One thing I find a little odd, is that to create the class, you say Ext.TabPanel and not Ext.tab.Panel. (OK, I just tested that and both work)

 

image

And, here is the code:

<!DOCTYPE html>

<!-- Auto Generated with Sencha Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AgelessST2</title>
    <link rel="stylesheet" type="text/css" href="sencha-touch-2.0.0-pr3/resources/css/sencha-touch.css"/>
    <script type="text/javascript" src="sencha-touch-2.0.0-pr3/sencha-touch-all-debug.js"></script>
    
    <script type="text/javascript"  >

        Ext.setup({
            onReady: function () {

                var pan = Ext.create('Ext.TabPanel', {
                    height: 150,
                    defaults: {
                        styleHtmlContent: true
                    },
                    items: [
                        {

                            title: 'Home',
                            html: 'Home Screen'
                        },
                        {

                            title: 'Contact',
                            html: 'Contact Screen'
                        }
                    ]
                });

                var buttonPannel = Ext.create('Ext.Panel', {
                    layout: 'hbox',
                    items: [
                            {
                                xtype: 'button',
                                text: 'b1',
                                handler: function (button) {
                                    pan.setActiveItem(0);
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'b2',
                                handler: function (button) {
                                    pan.setActiveItem(2);
                                }
                            }
                ]
                });

                Ext.Viewport.add({
                    fullscreen: true,
                    layout: 'vbox',
                    items: [buttonPannel, pan]
                });
            }
        });

      
    
    
    </script>
</head>
<body></body>
</html>
Hope this helps.
JavaScript, Sencha, SenchaTouch No Comments »

January 23rd, 2012Create A Simple MVC Button Click Listener in SenchaTouch2

 

I do not even want to admit how much time I spent today in a more complex application trying to get a button to respond to a tap event in SenchaTouch 2.0 Beta.  I did notice several people like me on the forums with similar issues, but I did not find one concrete example that made the simple “click a button application”.  Of course I’m building this in Microsoft Visual Studio 2010 and debugging with Chrome.  Let me start at the end.  When you are done, you will have a simple two button page that you can click on either button and have your MVC controller react to either button as well as trap the button hit inside the actual Panel.

 

image

 

And for those of you that have read enough, here is the source:  

 

 

The Nitty Gritty

Creating an SenchaTouch project with MVC is a little tricky to setup.  You need to get all the directories right.  My favorite way to do this is to use the Sencha Designer to create the project, then abandon it if I want to strike out on my own.  That is what I’ve done here.  I don’t even think you can tell.

Here is the file layout as seen from Visual Studio:

image

5 Files and 3 directories.

Let’s first take a look at the Panel that contains the buttons.  Here is the code:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',
    config: {
        items: [
            {
                xtype: 'button',
                itemId: 'mybutton1',
                text: 'MyButton1',
                action: 'b1'
            },
            {
                xtype: 'button',
                itemId: 'mybutton2',
                text: 'MyButton2',
                action: 'b2'
            }
        ],

        listeners: [
            {
                fn: 'onMybutton1Tap',
                event: 'tap',
                delegate: '#mybutton1'
            }
        ]
    },
    onMybutton1Tap: function (button, e, options) {
        console.log('tap from mybutton1');
    }
});

Just a couple things to notice.  1) I’m defining an itemId which we will only be using in the local event (onMybutton1Tap).  If you notice the listener has a property delegate which looks for that.  I’m not sure if this is the best way to do this.  I’ve notice several forum people saying use the “on” syntax.  I did not find an example of that so this is what we have and it works.  Also notice the action property.  If you try and look that up on the SenchaTouch doc’s you will not find it.  I just made it up out of thin air (really!, well, I followed others examples).  I actually asked about this in the forums and I was told that is OK.  As a type safe language guy, it hurts, but I did it.

 

That’s it for the view.  Let’s move over to the controller.  Here is the source for that:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    views: [
        'MyPanel'
    ],

    refs: [
        {
            ref: 'MyPanel',
            selector: 'mypanel'
        }],

    init: function () {

        this.control({
            'button[action=b1]': {
                tap: this.onButtonTap1
            },
            'button[action=b2]': {
                tap: this.onButtonTap2
            }
        });
    },

    onLaunch: function () {
        console.log('onLaunch');
    },

    onButtonTap1: function () {
        console.log('controller: onButtonTap1');
    },

    onButtonTap2: function () {
        console.log('controller: onButtonTap2');
    },

    config: {

    }
});

Basically, what this is doing is filtering all buttons, then looking at just the buttons that have an action of b1 or b2.  If this was a large application, we’d probably want to do some more fancy component querying, but for now, this is OK.  If you keep your controllers small, this should always work.

 

That’s it for now.  Download the source and run it.  I hope it saves you a ton of time. 

As always any experts want to comment and improve or correct what I’ve done, please feel free to comment. 

Sencha, SenchaMVC, Visual Studio 2010, visu 1 Comment »

January 9th, 2012Building a Simple 2 Card Carousel with SenchaTouch 2

It was surprisingly difficult for me to build a very simple Carousel application with SenchaTouch 2.0 so I thought I’d make a short blog post with the example code in the hopes it saves someone else some time.  Basically, since this runs from the Sencha CDN, you should be able to paste this code directly into your web site as an html page and it should run directly.

The fact that you have to have an items array inside an items array is a little confusing as well as having to specify the height or nothing comes out.  I’m used to using flex: 1 to get the width right, but I had forgotten about height.

Here is what is created and the html and JavaScript code.

 

image

 

and the html:

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SenchaTouch 2.0 Carousel Example From PeterKellner.net</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/touch/sencha-touch-designer-edition/resources/css/sencha-touch.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-designer-edition/sencha-touch-all-debug.js"></script>
    <script type="text/javascript">

        Ext.setup({
            fullscreen: true,
            onReady: function () {
                Ext.create('Ext.Panel', {
                    fullscreen: true,
                    height: 200,
                    items: [{
                        xtype: 'carousel',
                        height: 200,
                        items: [
                                {
                                    title: 'title card 1',
                                    html: 'card1',
                                    cls: 'card1'
                                },
                                {
                                    title: 'title card 2',
                                    html: 'card2',
                                    cls: 'card2'
                                }
                            ]
                    }]
                });
            }
        });
    </script>
</head>
<body>
</body>
</html>

HTH’s

JavaScript, Sencha No Comments »

November 4th, 2011Building an Sencha’s ExtJS 4.0 MVC Application With Microsoft’s ASP.NET MVC3 Series / Basics

Part 1 Basics
Part 2 Enhanced (coming)

 

Introduction

In this series of articles, we will take the reference application build by the Sencha product team for using Sencha’s MVC pattern running with an ASP.NET 4.0 project (IIS in production).  The first article takes the reference Sencha MVC app and with almost no changes, makes it work with the ASP.NET Visual Studio 2010 project.  By default, the application works with JSON static files.  We change that to work with an ASP.NET MVC3 project.  The second article in the series embellishes the application to include a more real user experience by adding additional functionality and data.  The improved functionality includes both date and number columns as well as paging.  It also adds functionality for inserts and deletes which are left out of the base app from Sencha.


Visual Studio Project SenchaMVCASPNetSolution

 

The Final Project when running:

 

image

 

(more…)
.NET 4.0, ExtJS, MVC3, Sencha, SenchaMVC 6 Comments »

August 24th, 2011Getting ExtJS 4 Date Format To Behave Properly in Grid Panel with ASP.NET MVC3

 

Introduction and Problem

Converting Data Formats back and forth between browser and back end servers can be a little confusing.  In my case, I have a simple Sencha ExtJS 4.0 form that the user types a date into.  That date gets passed through an ajax request to the Microsoft asp.net controller, then that dates updates the SqlServer Database.  When the Date is displayed on a Grid Panel, again, an ajax request is made that grabs the date from the controller, then formats it using the MS dateFormat from ExtJS and hopefully, the same date the user typed in gets re-displayed.

So, let’s look at the details.

Posting the Date To the Server (View From JavaScript)

First, we need to define an ExtJS Model that has the date in it.  That codes looks like this in my case.

(more…)
.NET 4.0, C#, Database, DateFormat, MVC3, Sencha 1 Comment »

March 31st, 2011Building Hugely Performant Websites: Taking advantage of HTML5 Storage, 3rd DevConnections Orlando Presentation

 

For my final of 3 presentations at DevConnections Orlando is about building a hugely performant web application with html5 storage.  The app we built was a simple photo viewer that let you first look at hour images on line, then view them being pulled from local storage.  Here are a couple screen shots of what we built:

imageimage

And, here is the Visual Studio 2010 Project File:

 

imageIMAG0176IMAG0199

Community, ExtJS, Presentations, Sencha No Comments »

March 30th, 2011DevConnections Orlando, Build Advanced Web UIs with a Rich JavaScript UI Language

To build fully-featured web applications that support complex interaction in a reasonable amount of time requires a high-end JavaScript library. Someday, maybe JQueryUI will be good for this, but for now, the choices are few and include ExtJS, Dojo, YUI and a handful of others. This session will use ExtJS as the example. We will use Microsoft’s ASP.NET MVC as the data / CRUD layer and from that, we will build a typical LOB (line of business) application using complex UI elements. Those elements include layout managers, data grids, extensive validation, spinner controls and other advanced UI features. To get an idea of what I’m talking about, spend five minutes looking at the examples on the ExtJS web site demonstrating these advanced web UI features http://www.sencha.com/products/js/. You will be convinced that spending hundreds of hours trying to build something not nearly as well done as this is a waste of time when there are such excellent libraries already built for you.

The source attached below for my demos.

image

(more…)
.NET 4.0, Community, ExtJS, MVC3, Presentations, Sencha 5 Comments »
© 2012 PeterKellner.net. All Rights Reserved
XHTML CSS RSS