Results 1 to 3 of 3

Thread: ExtJS + ASP.NET MVC + UserControls

  1. #1

    Default ExtJS + ASP.NET MVC + UserControls

    Hi,

    I am trying to integrate ExtJS with ASP.NET MVC and server side UserControls.
    Up to now I have created a MVC Master Page and built that page entirely with ExtJS using embedded js. I'm using the 'border' layout as follows.
    West = layout: 'accordion' where one of the accordians contains a TreePanel.
    North = Standard basic panel.
    South = Standard basic panel.
    Center = TabPanel.

    I have a listener registered on the TreePanel that executes the following function:
    Code:
            function activateTab(p_node) {
                var ctl = Ext.getCmp('tabContent');
                var tab = Ext.getCmp('tab_' + p_node.id);
    
                if (typeof tab != 'undefined') {
                    tab.show();
                } else {
                    ctl.add({
                        title: p_node.attributes.text,
                        id: 'tab_' + p_node.id,
                        autoLoad: '/SiteManager/Cell',
                        scripts: true,
                        closable: true
                    }).show();
                }
            };
    This creates a tab in the TabPanel and executes an action in a controller on the server side which eventually returns a System.Web.Mvc.ActionResult.
    The Cell action that is called is below:
    Code:
            public ActionResult Cell()
            {
                return View("~/Views/SiteManager/CellControl.ascx");
            }
    A slimmed down version of the CellControl.ascx UserControl is as follows:
    HTML Code:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    
    <div id='CellControl'>
    </div>
    
    <script type="text/javascript">
        eval(function() {
            var topSitePanel = new Ext.Panel({
                title: 'Site Top',
                id: 'topSitePanel',
                autoScroll: true,
                html: '&lt;empty panel&gt;',
                scripts: true
            });
    
            var accordianPanel = new Ext.Panel({
                applyTo: 'CellControl',
                id: 'SiteAccordian',
                collapsible: false,
                autoWidth: true,
                autoHeight: true,
                layout: 'accordion',
                items: [topSitePanel],
                scripts: true
            });
    
            accordianPanel.show();
        });
    </script>
    Unfortunately, I'm not getting any content displayed in the newly created tab. I can see (using FireBug)that the <div id='CellControl'> is rendered. Also the javascript block defined in the UserControl is returned to the client. I have also tried the above without the eval() statement.

    I'm just wondering what is the best way to render .ascx (and also .aspx pages if possible) to dynamic tabs when using ExtJs with ASP.NET MVC?
    Any help on this would be greatly appreciated.

    Thanks in advance,
    Brian.

  2. #2

    Default

    first remark eval is taking a string as parameter so should be something like
    Code:
    eval('alert("foobar");');
    .

    also I find kind of weird you are declaring an nameless function

    Code:
    eval(function(){})
    , I don't think the code would be actually get executed ...

    don't know if it is really related ...

  3. #3

    Default

    hi , can i use js grid in asp.net user control , i add column in run time ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •