mtelligent

View Original

How to set your main view in Sencha Touch (Ext.Setup vs. Ext.Application)

David San Filippo

I'm trying to build ASP.Net server controls to emit Sencha Touch javaScript and need to decide on the basic structure of the JavaScript that will be emitted. I've encapsulated the logic to emit elements into the pages header during pre-Render and it's working pretty well, though I'm not sure the script I'm rendering is the best.

Half the samples I read use Ext.Setup and others use Ext.Application. Saw a few forum answers that said Applications were primarily for MVC applications, but also read that applications had support for targeting profiles.

Right now I have code using the Ext.Application. My current approach is having all server controls inherit from a base class that extends a normal ASP.Net Panel. During pre-Render, I walk the stack and then emit JavaScript in reverse depenency order to declare/configure each object. (generate variables using control ID's as the name), Then in the Applications launch function, call show on the outer most components.

Not sure if this approach makes sense, or I should use Ext.Setup and create a separate Application Control if that is needed.

So far, this is working for Panels. Right now, this snippet:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="ST" Assembly="Sencha.Touch.Core" Namespace="Sencha.Touch.Core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ST:Panel ID="panelOuter" runat="server" fullScreen="true" style="background-color:Red">
     <ST:Panel ID="panelInner" runat="server" dock="bottom" style="background-color:Blue">
    Hello There
    </ST:Panel>
    </ST:Panel>
    </div>
    </form>
</body>
</html>

Renders the following:

   
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>
   
  </title>
  <script src="src/sencha-touch.js" type="text/javascript"></script>
  <link href="resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
   
  var panelInner = new Ext.Panel({
  html : 'Hello There',
  style : 'background-color:Blue',
  dock : "bottom"
  });
   
  var panelOuter = new Ext.Panel({
  html : '',
  style : 'background-color:Red',
  dockedItems : [panelInner],
  fullscreen : true
  });
   
   
  new Ext.Application({
  launch: function() {
  panelOuter.show();
  }
  });
   
   
  </script></head>
  <body>
  <form method="post" action="default.aspx" id="form1">
  <div class="aspNetHidden">
  <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUINzE2MDI0MjlkZE+ZVR52o7CJnpfk3GNcmZ3iwEPl29BJRNRvhoXb4JuH" />
  </div>
   
  <div>
   
   
  </div>
  </form>
  </body>
  </html>

What I hope to eventually do, is handle layout controls, and then add buttons and other form controls (supporting post backs) and eventually look to support databinding as well, though I'm a ways from that...