[CLOSED] [1.0] Before(...) DirectMethod to prevent further code execution

  1. #1

    [CLOSED] [1.0] Before(...) DirectMethod to prevent further code execution

    Hi there,

    What I'm trying to do for our project is attach a DirectEvent to the BeforeSelect event of the DataView, do some checks on the server side and decide to disallow selection of that node. Effectively returning false as per ExtJs API doc. However, because DirectEvents are obviously asyncronous, this cookie doesn't quite crumble like that.


    Is there some way to make said scenario work? Perhaps by using callback methods and such? Maybe adding something to the ExtraParamsResponse object?


    Thanks very very much in advance
  2. #2

    RE: [CLOSED] [1.0] Before(...) DirectMethod to prevent further code execution

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
    <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    string path = Server.MapPath("../../Shared/images/thumbs");
                    string[] files = System.IO.Directory.GetFiles(path);
    
                    List<object> data = new List<object>(files.Length);
                    foreach (string fileName in files)
                    {
                        System.IO.FileInfo fi = new System.IO.FileInfo(fileName);
                        data.Add(new { name = fi.Name, 
                                       url = "../../Shared/images/thumbs/" + fi.Name,
                                       size = fi.Length,
                                       lastmod = fi.LastAccessTime });
                    }
    
                    this.Store1.DataSource = data;
                    this.Store1.DataBind();
                }
            }
            
            [DirectMethod]
            public void CheckSelection(string nodeId)
            {
                ResourceManager.AjaxSuccess = nodeId.StartsWith("z", true, System.Globalization.CultureInfo.InvariantCulture);
                //emulate delay
                System.Threading.Thread.Sleep(2000);
            }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
        
        <script src="data-view-plugins.js" type="text/javascript"></script>
        
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
            var prepareData = function (data) {
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
    
                return data;
            };
                
            var selectionChaged = function (dv,nodes) {
                var l = nodes.length, s = l != 1 ? 's' : '';
                ImagePanel.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
            };
            
            var beforeClick = function(view, index, node){
                var nodeEl = Ext.get(node);
                nodeEl.mask("Checking...", "x-mask-loading");
                Ext.net.DirectMethods.CheckSelection(view.getRecord(node).data.name, {
                    success : function(){
                        view.select(node, true);
                    },
                    complete : function(){
                        nodeEl.unmask();
                    }                    
                });
                return false;
            };
        </script> 
        
        <style type="text/css">
            .images-view .x-panel-body{
                background: white;
                font: 11px Arial, Helvetica, sans-serif;
            }
            .images-view .thumb{
                background: #dddddd;
                padding: 3px;
            }
            .images-view .thumb img{
                height: 60px;
                width: 80px;
            }
            .images-view .thumb-wrap{
                float: left;
                margin: 4px;
                margin-right: 0;
                padding: 5px;
                text-align:center;
            }
            .images-view .thumb-wrap span{
                display: block;
                overflow: hidden;
                text-align: center;
            }
    
            .images-view .x-view-over{
                border:1px solid #dddddd;
                background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
                padding: 4px;
            }
    
            .images-view .x-view-selected{
                background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
                border:1px solid #99bbe8;
                padding: 4px;
            }
            .images-view .x-view-selected .thumb{
                background:transparent;
            }
    
            .images-view .loading-indicator {
                font-size:11px;
                background-image:url(../../Shared/images/loading.gif);
                background-repeat: no-repeat;
                background-position: left;
                padding-left:20px;
                margin:10px;
            }
        </style>   
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store runat="server" ID="Store1">
                <Reader>
                    <ext:JsonReader IDProperty="name">
                        <Fields>
                            <ext:RecordField Name="name" />
                            <ext:RecordField Name="url" />      
                            <ext:RecordField Name="size" Type="Int" />
                            <ext:RecordField Name="lastmod" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>   
            
            <h3>Images are started with 'z' can be selected only</h3>                       
            
            <ext:Panel 
                ID="ImagePanel" 
                runat="server" 
                Cls="images-view" 
                Frame="true" 
                AutoHeight="true" 
                Width="535" 
                Collapsible="true" 
                Layout="Fit"
                Title="Simple DataView (0 items selected)">
                <Items>
                    <ext:DataView ID="ImageView" runat="server"
                        StoreID="Store1"
                        AutoHeight="true"
                        MultiSelect="true"
                        OverClass="x-view-over"
                        ItemSelector="div.thumb-wrap"
                        EmptyText="No images to display">
                        <Template runat="server">
                            <Html>
                                <tpl for=".">
                                    <div class="thumb-wrap" id="{name}">
                                        <div class="thumb"><img src="{url}" title="{name}">
    
                                        {shortName}
                                    
    
                                </tpl>
                                <div class="x-clear">
        
                            </Html>
                        </Template>                         
                                        
                        <Listeners>
                            <SelectionChange Fn="selectionChaged" /> 
                            <BeforeClick Fn="beforeClick" />
                        </Listeners>   
                    </ext:DataView>
                </Items>        
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] [1.0] Before(...) DirectMethod to prevent further code execution

    Of course. Now why didn't I think of this. Thank you.

Similar Threads

  1. Replies: 7
    Last Post: Aug 13, 2012, 1:53 PM
  2. Prevent multiple calls to DirectMethod
    By glenh in forum 1.x Help
    Replies: 0
    Last Post: May 03, 2012, 12:00 AM
  3. [1.3]How to prevent DirectMethod use POST
    By firebank in forum 1.x Help
    Replies: 3
    Last Post: Apr 09, 2012, 1:31 PM
  4. [CLOSED] MessageBox: stop execution until message box button is clicked
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 06, 2010, 2:24 PM
  5. [CLOSED] Ext.Msg.alert(); able to halt code execution?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 09, 2008, 9:33 AM

Posting Permissions