Please pardon my ignorance as I am new to Sencha.

I am using the trial version of Sencha Architect, version 2.1.0, build 676, Release Channel 2.1-stable. Within this trial version of Sencha, I created a GridPanel and put a GridView within that GridPanel. This Sencha project uses a WCF app that I created to get the data from SQL Server. It is my understanding that this trial version of Sencha Architect has also the ExtJS library.

I created an MVC web app. I put into that MVC app the files from Sencha. I created within the MVC app a file named simple.html and in that file there is code to link to extjs/resources/css/ext-al.css and there is code in script tags to bring in extjs/ext-all-debug.js and app.js. This simple.html file has body tags but nothing within the body tags. I set the simple.html file as the Start Page.

When I run the MVC app from within Visual Studio 2010 (by pressing the F5 key) , I see the Sencha GridPanel and its GridView in the browser at the top left of the browser and I see that the Sencha GridPanel and its GridView received successfully the data from the WCF web service app and show properly the data.

If I were to put a div with a div id and runat=”server” in the body tags of the simple.html file, does anybody know by chance how and where I code to put this Sencha GridPanel and its GridView into that specific div on that specific simple.html page?

I know in a web app how to use C# to build a div and its rows and then how to fill a specific outer div in an aspx page with the dynamically build C# div and its rows.

I am trying to figure out though how to put the Sencha GridPanel that has inside a GridView that I brought into the MVC app (and that still uses the WCF app to get the data from SQL Server) into a specific html file or aspx file of that MVC app. I must learn how to do this I am thinking as I want to use Sencha within a web app and be able to specify exactly to what divs in the MVC app’s html file or aspx file the Sencha controls will go.

Please pardon my ignorance if this is a silly question. I just do not understand how and in what file to put the Sencha control into a specific div in the MVC web app.

I have used C# to create in the code behind a dynamic div and its rows and then to put that C#-built HTML code into a specific div via a Home.js file. In a web app, I have a Home.js file that loads when the Home.aspx page loads. In that Home.aspx page, there is a div with the id=”OvenControlPanel” and runat=”server”. In the Home.js file, there is code like the following to fill the div named OvenControlPanel with the C#-coded :

var theHost =;
type: 'POST',
async: true,
url: 'http://' + theHost + '/AjaxResponder.aspx?CallingPage=HOME&Panel=Oven&SelectedRowID=' + SelectedRow,

dataType: 'html',
timeout: 0,
success: function (responseData) { OvenControlPanel.html(responseData == "" ? OvenControlPanel.html() : responseData); }

In the AjaxResponder.aspx.cs file, there is code like the following:
private void UpdateControlUI(Sender.StatusMsgCollection statusList)
if (statusList == null)

HtmlGenericControl div = null;
div = PlantMatrixDashboard.Classes.PanelBuilder.UpdateStatus_OvenControlsPC6000(PlantMatrixDashboard.Classes.PowisControl.Types.Oven, selectedRowId, parser.StatusMsgList, theData);

StringWriter writer = new StringWriter();
HtmlTextWriter htmlwriter = new HtmlTextWriter(writer);

catch (Exception theEX)
string strEXCEPTION = theEX.ToString();



In the code above, the PanelBuilder class file is used to build dynamically in C# the div and its rows that will be put into the outer div named OvenControlPanel:


//Create Header Row <div>:
new string[] { "Standard", "Standard", "Standard", "Center", "Center", "Center", "Center", "Center", "Center" },
new string[] { "Oven", "Status", "Program", "Stage", "Time", "Dry", "Wet", "RH%", "Int" },
new int[] { 155, 120, 205, 55, 55, 55, 55, 55, 55 }));

int index = 0;

foreach (Oven oven in ovenList)

//Create row <div>:
HtmlGenericControl row = new HtmlGenericControl("div");
row.Attributes.Add("id", "Oven6000Row" + "_" + oven.Name);

//Add status icon to row:
HtmlGenericControl img = new HtmlGenericControl("img");
img.Attributes.Add("class", "ControlIcon");
img.Attributes.Add("src", oven.Image);

//Add cell <div>'s to row:
row.Controls.Add(CreateControlDisplayCell("Standard", 137, oven.Name));
row.Controls.Add(CreateControlDisplayCell("Standard", 120, oven.Status));
row.Controls.Add(CreateControlDisplayCell("Standard", 205, oven.Program));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.Stage));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.Time));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.Dry));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.Wet));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.RH));
row.Controls.Add(CreateControlDisplayCell("Center", 55, oven.Int));

//Create and add clear <div>:
HtmlGenericControl clear = new HtmlGenericControl("div");
clear.Attributes.Add("style", "clear: both;");

//Add row to oven display panel:

I am not sure though how to put the Sencha GridPanel and its GridView within the GridPanel that I brought into an MVC app into a specific div in an html or aspx page within that MVC app.

Please let me know if I can answer any questions.

I appreciate in advance your consideration of my question.


The following is further information in case it is helpful:

In this MVC web app, I created an app folder and within that folder I created the model, store, and view folders. In the model folder, I have the MyModel.js file that comes from my Sencha project. In the store folder of the MVC web app, I have the MyModelStore.js file that comes from the Sencha project. In the MVC app’s view folder, I have the SenchaUsingWCF.js file and the Viewport.js file.
In the MVC app, I have a Content folder, and in it there is a themes folder, and in it is a base folder, and in it there is an images folder that has a bunch of jquery.ui.something.css files (e.g., jquery.ui.accordion.css, jquery.ui.all.css, and jquery.ui.theme.css).

In the MVC app, there is a folder named extjs and in that folder extjs there is a file named ext-all-debug.js. In the extjs folder, there is a resources folder. In the resources folder, there are the folders named css, sass, and themes. The themes folder has sub folders. The css folder has some css files, for example ext-all-access.css, ext-all.css, ext-ie.css, and ext-standard.css). The sass folder has a config.rb file and some .scss files that are named the same as the css files in the css folder.

There is a Scripts folder in the MVC app and it has some jquery-1.5.1 javascript files, some jquery-ui-1.8.11 javascript files, some jquery-unobtrusive-ajax javascript files, some jquery.validate javascript files, some MicrosoftAjax javascript files, some MicrosoftMvcAjax javascript files, some MicrosoftMvcValidation javascript files, and some modernizr-1.7 javascript files.

In the MVC app, there is the app.js file in the root of the directory. This app.js file is not in a folder. The simple.html file also is in the root directory of this MVC app in Solution Explorer in Visual Studio 2010 and the simple.html file is not in a folder within Solution Explorer in VS 2010.