Hybrid View

Put Sencha GridPanel and its GridView in MVC web app to a specific div

Put Sencha GridPanel and its GridView in MVC web app to a specific div

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 :

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.

Hviezdoslav

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.

In the little test MVC web app, I'd created in the Solution Explorer a folder named app and inside of that folder I'd created a sub folder named view. Into that view folder of the MVC app, I had put the SenchaUsingWCF.js file that comes from my Sencha project.

The original code in that SenchaUsingWCF.js file is as follows:

Ext.define('MyApp.view.SenchaUsingWCF', {
extend: 'Ext.panel.Panel',

frame: true,
height: 250,

width: 400,

layout: {

align: 'stretch',
type: 'vbox' },

title: 'Sencha Using WCF',

initComponent: function () {

var me = this;

Ext.applyIf(me, {

items: [

{

xtype: 'gridpanel',
flex: 1,

store: 'MyModelStore',
viewConfig: {

},

columns: [

{

xtype: 'gridcolumn',
dataIndex: 'ovenViewID',
text: 'OvenViewID' },

{

xtype: 'gridcolumn',
dataIndex: 'ovenName',
text: 'OvenName' }

]

}

]

});

me.callParent(arguments);

}
});

The MVC app's file named simple.html already had the script tag for app.js and ext-all-debug.js and the link to extjs/resources/css/ext-all.css. The MVC app's simple.html had body tags but nothing within the body.

So inside the body of this simple.html file, I added three divs in the following order:

a div with no id and with the text "this DIV is above the OvenViewDiv" between the opening and closing div tags

a div with the id OvenViewDiv and runat="server" with nothing inside the opening and closing div tags

a div with no id and with the text "this DIV is below the OvenViewDiv" between the opening and closing div tags

When I run from within Visual Studio 2010 the MVC app with the divs inside the body of the simple.html file and with NO changes to the SenchaUsingWCF.js file, the SenchaUsingWCF Ext.panel.Panel that has in it the MyGridPanel Ext.grid.Panel shows BELOW BOTH divs that have the text about being above and below the div with the id OvenViewDiv.

I added the line of code "this.render('OvenViewDiv');" to the SenchaUsingWCF.js file in the MVC app just after the very last line of code "me.callParent(arguments):" so that the SenchaUsingWCF.js file in the MVC app has the following code:

Ext.define(

'MyApp.view.SenchaUsingWCF', {

extend:

'Ext.panel.Panel',

frame:

true,

height: 250,

width: 400,

layout: {

align:

'stretch',

type:

'vbox'
},

title:

'Sencha Using WCF',

initComponent:

function () {

var me = this;

Ext.applyIf(me, {

items: [

{

xtype:

'gridpanel',

flex: 1,

store:

'MyModelStore',

viewConfig: {

},

columns: [

{

xtype:

'gridcolumn',

dataIndex:

'ovenViewID',

text:

'OvenViewID'
},

{

xtype:

'gridcolumn',

dataIndex:

'ovenName',

text:

'OvenName'
}

]

}

]

});

me.callParent(arguments); this.render('OvenViewDiv'); //I added this line of code. Hviezdoslav
}

});

When I run the MVC app now using F5 from within Visual Studio 2010, when the simple.html page loads there is a second or two that I see the two divs (one with text about being above the middle OvenViewDiv div and the other with text about being below the OvenViewDiv div) right next to each other at the very top left of the web page BEFORE I then see the Sencha Panel and its GridView BETWEEN the div with text about being above the OvenViewDiv and the div with text about being below the OvenViewDiv.

So ultimately the addition of that one line of code to the end of SenchaUsingWCF.js in the MVC app seems to have worked EXCEPT that there is for a second or two when the page loads the two divs with text right on top of each other before the OvenViewDiv is filled with the Sencha Panel/GridView.

Is there a way to avoid that one or two seconds of having the two divs with text right on top of each other before finally the Sencha Panel/GridView loads into the OvenViewDiv div that is between those other two divs with text? Is there somewhere else that I should be trying to put the Sencha Panel/GridView into the specific div with the id OvenViewDiv? Is there a different JS file into which I should be trying to do this?

In the Sencha project, I went to the SenchaUsingWCF (Ext.panel.Panel) just under the Views and I unchecked the checkbox for initialView.

At the end of the code in the MVC web app's SenchaUsingWCF.js file, I commented out the following line of code:

this.render('OvenViewDiv');

To what file in the MVC app should I put the code to instantiate your class in the Application launch? Do I put the code that you provided into the app.js file in the MVC app or to the Viewport.js file in the MVC app? Currently the MVC app's file named app.js has the following code:

In the Viewport.js file, I changed "renderTo: Ext.getBody()," to "renderTo: 'OvenViewDiv'," but still there is a second or two when the page loads before the Sencha's view shows in its div between the two divs that have text, but still the top and bottom divs with text show on top of each other when the page loads for a second or two before the Sencha view shows in the middle div between the two divs with text.

So I commented out in Viewport.js file in MVC app the line "renderTo: 'OvenViewDiv'" and changed the code in Viewport.js to the following (trying both a semi-colon and a comma after the code "var foo = Ext.create('MyApp.view.SenchaUsingWCF', {
renderTo: 'OvenViewDiv' });" that you provided:

I get a green squiggly line in the MVC app under the "var" for "var foo" and I am not sure to what file and how to add the code to instantiate my class in the application launch and hovering over the green squiggly line shows the "Expected identifier or string" message. I am not sure how and where to instantiate the class. Currently when I run the MVC app I only see the two divs with text (the top and bottom divs) and do not see the Sencha view loading into the middle div at all.

If I remove the VAR FOO code from Viewport.js file in MVC app and replace with the following code, the web page loads and shows for one or two seconds the two divs with text before the Sencha view shows in its middle div between the two divs with text:

In the Sencha project, I had clicked already on the SenchaUsingWCF panel and UNCHECKED the intialView checkbox in the Config properties.

So in the Sencha project, I have clicked on Application at the very top of the Project Inspector and have clicked the add symbol (the plus symbol to add) next to the Launch property and I added your VAR FOO code within the launch function.

So now when I double-click the Application at the very top of Project Inspector within the Sencha project I see in the code view the following:

I then copied the app.js file from the Sencha project and pasted to overwrite the file of the same name in the MVC app's folder structure. In the Viewport.js file in the MVC app, I commented out the following line of code: renderTo: Ext.getBody(),

When I run the MVC app from within Visual Studio, still there is a second before the Sencha view/panel with its GridView shows in its DIV. There is still a second when the page loads at first when the two divs with text show on top of one another before the middle div shows the Sencha view/panel between the two divs with text. Once the middle div shows its Sencha view/panel, there might be a second or two where the LOADING gif of Sencha shows before the data shows within the Sencha view/panel/gridview, but I am not worried about the LOADING gif. I just wanted the Sencha view/panel to show immediately in its middle div when the page loads along with the upper and lower divs with text. I guess though that the two divs with text (with just text in the HTML page between the opening and closing DIV tags) render in the browser so quickly before the JavaScript runs to put the Sencha view/panel/gridview in the middle div.

I thought that I'd try though to get the middle div to show the Sencha view/panel/gridview immediately when the page loads (even if there is no data in it yet) so that there is not a second or two when the page loads that the upper and lower divs show with text on top of each other before a second or two later the middle div on the web page shows the Sencha view/panel/gridview between the upper div with text and lower div with text.