DraggableConfig is not working

  1. #1

    DraggableConfig is not working

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
        var X = Html.X();
    }
    <head>
        <title> Giriş sayfası </title>
    
        <style type="text/css">
            .bodyclscenter {
                background-image: url('../../Content/bg-main.png');
                background-repeat: repeat;
            }
        </style>
    </head>
    
    @X.AntiForgeryField().ID("AntiForgeryToken")
    
    @(X.Viewport()
     .ID("viewport")
     .Listeners(x => { x.BoxReady.Handler = "Ext.get(window.document).on('contextmenu', function (e) { e.preventDefault(); return false;});"; })
     .SetStyle("background-color", "white")
     .RenderTo("body")
     .LayoutConfig(new BorderLayoutConfig() { })
     .Items(X.Panel().Region(Region.Center)
                   .BodyCls("bodyclscenter")
                   .ID("regioncenter")
                   .LayoutConfig(new VBoxLayoutConfig
                   {
                       Align = VBoxAlign.Center,
                       Pack = BoxPack.Center
                   })
                   .Border(false)
                   .Items(X.FormPanel()
                   .ID("loginform")
                   .Title("Giriş yap")
                   .Frame(true)
                   .Draggable(true)
                   .DraggableConfig(X.ComponentDragger().OnEnd(x => { x.Handler = "alert('im not working :(');"; }))
                   .Width(400)
                   .Icon(Icon.Lock)
                   .BodyPadding(5)
                   .DefaultAnchor("100%")
                   .Items(X.TextField().ID("registry").Name("registry").FieldLabel("Sicil").AutoFocus(true).MaxLength(20).InputType(Ext.Net.InputType.Text).BlankText("Doldurulması zorunlu alan.").AllowBlank(false).AnimateShadow(true),
                          X.TextField().ID("password").Name("password").FieldLabel("Şifre").InputType(Ext.Net.InputType.Password).MaxLength(30).BlankText("Doldurulması zorunlu alan.").AllowBlank(false).AnimateShadow(true).RightButtonsShowMode(ButtonsShowMode.MouseOverOrFocus).RightButtons(X.Button().AllowDepress(true).EnableToggle(true).ToolTip("Şifreyi göster").Icon(Icon.Eye).Listeners(x => { x.Toggle.Handler = "this.up('textfield').passwordMask.setMode(pressed ? 'showall' : 'hideall'); this.setTooltip((pressed ? 'Şifreyi Gizle' : 'Şifreyi Göster'));"; })).Plugins(X.PasswordMask().AcceptRate(1).AllowAnyChars(true)/*.LoginField("#{registry}")*/.Mode(PasswordMaskMode.ShowAll).StrictPassword(false).Pattern("a"), X.CapsLockDetector().Listeners(x => { x.CapsLockOn.Handler = "#{password}.showIndicator({iconCls : '#Error', tip : 'CapsLock açık'});"; x.CapsLockOff.Handler = "#{password}.hideIndicator();"; })),
                          X.Checkbox().ID("rememberme").Name("rememberme").FieldLabel("Beni hatırla").AnimateShadow(true))
                   .Buttons(X.Button().Text("Kayıt ol").ID("registerbutton").DirectClickAction("Index", "Register").Icon(Icon.UserAdd),
                            X.Button().ID("loginbutton").Text("Giriş yap").Icon(Icon.Lightning)
                   .FormBind(true)
                   .DirectEvents(de =>
                   {
    
                       de.Click.After = "#{loginform}.cascade(function(item){if(item.id != 'loginform'){item.disable();}});";
                       de.Click.Complete = "#{loginform}.cascade(function(item){if(item.id != 'loginform'){item.enable();}});";
                       de.Click.EventMask.ShowMask = true;
                       de.Click.Url = Url.Action("Login");
                       de.Click.Method = HttpMethod.POST;
                       de.Click.FormID = "loginform";
                       de.Click.EventMask.ShowDurationMessages = true;
                       de.Click.EventMask.Msg = "Yükleniyor..";
                       de.Click.EventMask.MinDelay = 1000;
                       de.Click.ExtraParams.Add(new Parameter("__RequestVerificationToken", "#{AntiForgeryToken}.getValue()", ParameterMode.Raw));
                       de.Click.ExtraParams.Add(new Parameter("rememberme", "#{rememberme}.getValue()", ParameterMode.Raw));
    
                   }))))
                   .Items(X.Panel().BodyCls("bodyclscenter").ID("regionsouth").Region(Region.South).LayoutConfig(new HBoxLayoutConfig { Pack = BoxPack.End }).Border(false).Items(X.Label().Text("Yedeklemeye kalan süre: " + "00:00:00").StyleSpec("font-weight:bold;font-size:100%;").ID("localtimelabel"))))
    
    <script src="~/Scripts/moment-with-locales.js"></script>
    
    <script>
     
        var now = new Date();
    
        var endofday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
    
        function countdown() {
    
            now = new Date();
    
            Ext.getCmp("localtimelabel").setText('Yedeklemeye kalan süre: '
                + moment.utc(moment(endofday, "DD/MM/YYYY HH:mm:ss").diff(moment(now, "DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss"));
    
            //App.TaskManager.stopTask(0);
        }
    
    </script>
    
    @(X.TaskManager()
         .ID("TaskManager")
         .Tasks(X.Task()
         .TaskID("Task1")
         //.Repeat(3)
         .Listeners(x =>
         {
    
             x.Update.Fn = "countdown";
    
         })
         .DirectEvents(x => { })))
    Last edited by elbetbirgun; Dec 04, 2019 at 3:54 PM.
  2. #2
    Hi. Please edit your post above and re-post your code with proper formatting. You can wrap your code samples in [CODE] tags.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hello!

    That's a lot of code for a simple feature highlight, don't you think? Please provide simplified code when you want us to be able to reproduce it. All you needed here was maybe the viewport and a simple panel with just width/height.

    Anyway, just use DraggablePanelConfig instead and you should be good. Panels take a special treatment to dragging, so the simpler DraggableConfig won't do.

    If you still have issues to have the panel movable, try switching the viewport's layout to AbsoluteLayout and give the inner panel X and Y positional coordinates; just so as you can see the panel as a window "floating" around, and be able to effectively move it.

    Note if you override the default endDrag behavior you may need to call its original code to clean up the drop with this.panelProxy.hide(); this.panel.saveState();. The default handers are defined in Ext.panel.DD.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jul 27, 2017, 1:08 PM
  2. Replies: 0
    Last Post: Oct 07, 2014, 9:06 AM
  3. Replies: 3
    Last Post: Feb 21, 2012, 8:46 AM
  4. DraggableConfig inside ViewPort gives error
    By Prithviholla in forum 1.x Help
    Replies: 0
    Last Post: Oct 28, 2011, 12:17 PM
  5. Replies: 2
    Last Post: Apr 04, 2011, 1:32 PM

Tags for this Thread

Posting Permissions