[CLOSED] Numberfield cant receive focus

Page 2 of 2 FirstFirst 12
  1. #11
    Quote Originally Posted by geoffrey.mcgill View Post
    Triple check that no JavaScript errors are thrown during the recreation of the components.
    Hi mcgill

    Thanks for the response

    i have managed to extract the Js code that our method producess when we create the field

    The code is:

    
    field = {
                            id: config.text + "_fieldLess",
                            border: false,
                            items: [
                                 { id: config.dataIndex + "_Less_Date",
                                     xtype: "datefield",
                                     anchor: "100%",
                                     flex: 1,
                                     name: "dateLessDate",
                                     emptyText: "From",
                                     altFormats: "d-m-Y",
                                     format: "d-m-Y", submitFormat: "Y-m-d",
                                     readOnly: true,
                                     selectOnFocus: false 
                                  },
                                 { id: config.dataIndex + "_Less_Time",
                                     type: "liaTimeField",
                                     xtype: "numberfield",
                                     forcePrecision: true,
                                     decimalSeparator: ":",
                                     anchor: "100%", flex: 1,
                                     name: "dateLessTime",
                                     step: 0.01, maxValue: 23.59,
                                     minValue: 0.00, readOnly: false,
                                     selectOnFocus: true 
                                  }
                            ],
                            layout: "hbox",
                            bodyPadding: 0,
                            defaults: { "margins": "0 5 0 0" }
                        }
    as you can there is northing out of the ordinary when we create the field, and in the first we create it works as it should be
    Its only the second time that we create it that it wont recevice focus.

    the reson we specified the field "type" is because of the override of valueTo:

    Code for that is:

    
    // Overrides Numberfield decimals precision
    Ext.override(Ext.form.NumberField, {
        forcePrecision: false,
    
        valueToRaw: function (value) {
            var me = this,
                decimalSeparator = me.decimalSeparator;
            value = me.parseValue(value);
            value = me.fixPrecision(value);
            value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
            if (isNaN(value)) {
                value = '';
            } else {
                if (me.type == "liaTimeField") {
                    var hourIndex = String(value).indexOf(".");
                    if (hourIndex == -1) {
                        var hours = value;
                    }
                    else {
                        var hours = String(value).substring(0, String(value).indexOf("."));
                    }
    
                    var step = me.step;
    
                    var stepIndex = String(step).indexOf(".") + 1;
                    var stepDecimal = String(step).substring(stepIndex, String(step).length);
    
    
    
                    var decimalIndex = String(value).indexOf(".") + 1;
                    var decimals = String(value).substring(decimalIndex, String(value).length);
                    var diff = 0;
                    if (decimals.length < 2) {
                        if (decimalIndex == 0) {
                            decimals = "00";
                        }
                        decimals += "0";
                    }
    
                    if (parseInt(decimals) > 59) {
                        if ((parseInt(decimals) + parseInt(stepDecimal)) >= 100) {
                            var number = (parseInt(decimals) + parseInt(stepDecimal));
                            var diffNumber = number - 100;
                            var diff = 60 - (parseInt(stepDecimal) - diffNumber);
                        }
                        else {
                            var diff = decimals - 60;
                            hours++;
                            if (diff < 10) {
                                diff = "0" + diff;
                            }
    
                        }
                        value = me.parseValue(hours + "." + diff);
                    }
                }
                value = me.forcePrecision ? value.toFixed(me.decimalPrecision) : parseFloat(value);
    
                if (me.type == "liaTimeField") {
                    if (hours < 10) {
                        value = String(value);
                        value = "0" + value;
                    }
                }
    
                value = String(value).replace(".", decimalSeparator);
            }
            return value;
        }
    
    })
    Hope this helps abit more on the subject.

    as mention earlier its only in IE that this behavior occurs..

    Regards

    Akpenob
  2. #12
    Hi @Akpenob,

    How do you render that "field"?
  3. #13
    Quote Originally Posted by Daniil View Post
    Hi @Akpenob,

    How do you render that "field"?
    The field is renderet af following

    First we intercept an even on a reorderable Toolbar and catch the even onDrop

    The following method create a "filter" (a splitbutton witch contains a menu)

    
    LIA.ToolBar.CreateItem = function (data) {
        var header = data.header,
        headerCt = header.ownerCt,
        reorderer = headerCt.reorderer;
        store = headerCt.ownerCt.store;
        // Hide the drop indicators of the standard HeaderDropZone
        // in case user had a pending valid drop in 
        if (reorderer) {
            reorderer.dropZone.invalidateDrop();
        }
    
        var sBtn = undefined;
        var toolbar = this.toolbar;
    
        var config = {
            noChecks : true,
            id: header.text,
            text: header.text,
            toolbar: this.toolbar,
            ns: header.ns,
            decimals: 0,
            dataIndex: header.dataIndex,
            dataType: header.type,
            dataDateType : header.dateType,
            sortInfo: {
                property: header.dataIndex,
                direction: header.sortState != null ? header.sortState : "ASC"
            },
            iconCls: header.sortState != null ? (header.sortState == "ASC" ? "#SortAscending" : "#SortDescending") : "#SortAscending",
            listeners: {
                'click': function (button, event) {
                    var sortInfo = button.sortInfo;
                    iconCls = button.iconCls;
                    sortInfo.direction = Ext.String.toggle(sortInfo.direction, "ASC", "DESC");
                    switch (iconCls) {
                        case "icon-sortascending":
                            iconCls = "#SortDescending";
                            LIA.Filters.ApplyFilter(button, store, toolbar);
                            break;
                        case "icon-sortdescending":
                            iconCls = "#SortAscending";
                            LIA.Filters.ApplyFilter(button, store, toolbar);
                            break;
                    }
                    button.setIconCls(iconCls);
                }
            }
        }
    
        switch (data.header.type) {
            case "String":
                config.dataType = "string";
                break;
            case "Date":
                config.dataType = "date";
                break;
            case "Float":
                config.decimals = 2;
                config.dataType = "number";
                break;
            case "Int":
                config.dataType = "number";
                break;
            case "Boolean":
                config.dataType = "boolean";
                break;
            case "bool":
                break;
        }
    // This starts the creation of the menu...!!!!
    sBtn = Ext.create('LIA.Filters.Filter', config);
        if (sBtn != undefined) {
            toolbar.add(sBtn);
    
        }
    };

    This is the method for createing a menu witch contains a panel and the fields.

    The method for creating the menu...

    Ext.define('LIA.Filters.Filter', {
        extend: 'Ext.button.Split',
    
        constructor: function (config) {
            config = Ext.apply(this, config);
            Ext.apply(this, this.config);
            this.callParent([config]);
    
            this.menu = Ext.create('Ext.menu.Menu',
            {
                id: config.text + "_menu",
                xtype: "menu",
                title: "Settings - " + config.text,
                iconCls: "#Cog",
                enableKeyNav: false,
                items: [LIA.Filters.CreateFilter(config)], // this creates the panel and the fields needed for the menu
                onMouseOver : function(){}
            });
        }
    });
    The method for creating the panel...
    
    LIA.Filters.CreateFilter = function (config) {
                var size = undefined;
                switch (config.dataType) {
                    case 'string':
                        size = { height: 100, width: 380 };
                        break;
                    case 'number':
                        size = { height: 130, width: 380 };
                        break;
                    case 'date':
                        if(config.dataDateType == "datetime")
                            size = { height: 160, width: 800 };
                        else
                            size = { height: 160, width: 500 };
                        break;
                    case 'boolean':
                        size = { height: 70, width: 380 };
                        break;
                }
                var filter = undefined;
                filter =
                    { id: config.text + "_panel", xtype: "panel",
                        items: [
                        { itemId: config.text + "_main",
                            border: false,
                            width: size.width,
                            height: size.height,
                            items: [
                            { id: config.text + "_checks",
                                itemId: config.text + "_west",
                                border: false,
                                region: "west",
                                flex: 1,
                                defaults: { "margins": "0 0 5 0" },
                                items: LIA.Filters.GenerateCheckBoxes(config),
                                layout: {
                                    type: "vbox"
                                },
                                bodyPadding: 5
                            },
                                { id: config.text + "_fields",
                                    itemId: config.text + "_center",
                                    border: false,
                                    region: "center",
                                    flex: 2,
                                    items: LIA.Filters.GenerateFields(config),// This creates the field witch should be on the panel
                                    layout: "anchor",
                                    bodyPadding: 5
                                },
                                { id: config.text + "_south",
                                    itemId: config.text + "_buttons",
                                    border: false,
                                    region: "south",
                                    defaults: { "margins": "0 5 0 0" },
                                    items: [
                                      { xtype: "button",
                                          id: config.text + "_apply",
                                          flex: 1,
                                          disabled: false,
                                          iconCls: "#Accept",
                                          text: "Apply",
                                          type: config.type,
                                          dataIndex: config.dataIndex,
                                          dataType: config.dataType,
                                          listeners: {
                                              click: function (button, event) {
                                                  var store = config.up().up().items.items[0].store;
                                                  LIA.Filters.ApplyFilter(config, store, config.toolbar);
                                              }
                                          }
                                      },
                                        { xtype: "button",
                                            id: config.text + "_remove",
                                            margins: "0 0 0 0",
                                            flex: 1,
                                            iconCls: "#Delete",
                                            text: "Remove",
                                            listeners: {
                                                click: function (button, event) {
                                                    var store = config.up().up().items.items[0].store;
                                                    LIA.Filters.ApplyFilter(config, store, config.toolbar,"remove");
                                                }
                                            }
                                        }],
                                    layout: "hbox",
                                    bodyPadding: 5
                                }
                                           ],
                            layout: "border",
                            bodyPadding: 5
                        }
                                   ],
                        layout: "fit",
                        bodyPadding: 0
                    };
                return filter;
            }
    The method for creating the "field"
    
    
    // ignore the part of the switch case and look under GenerateDateTimeFields
    
     LIA.Filters.GenerateFields = function (config) {
                var fieldLike = undefined;
                var fieldEquals = undefined;
                var fieldLess = undefined;
                var fieldGreater = undefined;
                var fieldBetween = undefined;
                var items = [];
    
                switch (config.dataType) {
                    case 'string':
                        fieldLike = LIA.Filters.GenerateField(config, "like");
                        fieldEquals = LIA.Filters.GenerateField(config, "eq");
                        items.push(fieldLike);
                        items.push(fieldEquals);
                        break;
                    case 'number':
                        fieldLess = LIA.Filters.GenerateField(config, "lt");
                        fieldGreater = LIA.Filters.GenerateField(config, "gt");
                        fieldEquals = LIA.Filters.GenerateField(config, "eq");
                        items.push(fieldLess);
                        items.push(fieldGreater);
                        items.push(fieldEquals);
                        break;
                    case 'date':
                        if (config.dataType == "date") {
                            if (config.dataDateType != "datetime") {
                                fieldLess = LIA.Filters.GenerateField(config, "lt");
                                fieldGreater = LIA.Filters.GenerateField(config, "gt");
                                fieldEquals = LIA.Filters.GenerateField(config, "eq");
                                fieldBetween = LIA.Filters.GenerateField(config, "bt");
                                items.push(fieldLess);
                                items.push(fieldGreater);
                                items.push(fieldEquals);
                                items.push(fieldBetween);
                            }
                            else {
                                fieldLess = LIA.Filters.GenerateDateTimeField(config, "lt"); // this is the method that creates the field
                                fieldGreater = LIA.Filters.GenerateDateTimeField(config, "gt"); // this is the method that creates the field
                                fieldEquals = LIA.Filters.GenerateDateTimeField(config, "eq"); // this is the method that creates the field
                                fieldBetween = LIA.Filters.GenerateDateTimeField(config, "bt"); // this is the method that creates the field
                                items.push(fieldLess); 
                                items.push(fieldGreater);
                                items.push(fieldEquals);
                                items.push(fieldBetween);
                            }
                        }
                        break;
                    case 'boolean':
                        fieldEquals = LIA.Filters.GenerateField(config, "eq");
                        items.push(fieldEquals);
                        break;
                }
                return items;

    I know this is alot of code to display on how to create the field but i hope it clarifies how the "form/ menu" is added to the toolbar and how the field is created.

    Regards

    Akpenob
  4. #14
    Thank you.

    How do you recreate it? I mean that you said that the issue is reproducible after rendering/creating the things at the second time.

    So, how do you destroy the previously rendered things?
  5. #15
    Quote Originally Posted by Daniil View Post
    Thank you.

    How do you recreate it? I mean that you said that the issue is reproducible after rendering/creating the things at the second time.

    So, how do you destroy the previously rendered things?
    This is done by doing the following..

    When the remove button is click the following function is call..

    this line can be found on panel config under the part "remove button"
    
    LIA.Filters.ApplyFilter(config, store, config.toolbar,"remove");
    And the method snippet is like this..

    
     LIA.Filters.ApplyFilter = function (splitButton, gridStore, toolbar, cmd) {
                splitButton.menu.hide();
                if (cmd == "remove") {
                    LIA.Filters.DeleteFilter(splitButton, gridStore, toolbar, cmd);
                }
    The DeleteFilter is the part that removes its..

    
    LIA.Filters.DeleteFilter = function (splitButton, gridstore, toolbar, cmd) {
                splitButton.menu.hide();
                var found = false;
                var sorterFound = false
                var filters = gridstore.filters;
                var sorters = gridstore.sorters;
                for (var filterKey in filters.items) {
                    var gFilter = filters.items[filterKey];
                    if (gFilter.property == splitButton.dataIndex) {
                        found = true;
                        break;
                    }
                }
                if (found) {
                    filters.removeAt(filterKey);
                }
                if (cmd == "remove") {
                    toolbar.remove(splitButton); // this removes the button / menu and calls destroy on the content..
                }
            }
    After this to recreate the same button we just drop the header on to the toolbar and the component and its content is recreated..

    Hopes this helps..

    Regards

    Akpenob
    Last edited by Akpenob; Apr 23, 2013 at 11:16 AM.
  6. #16
    Thank you for all the details. As far as I can see you are doing everything correctly, I mean creating and destroying the things.

    I am struggling to guess what might be wrong, but, unfortunately, I cannot.

    Maybe, this technique can help to prepare a runnable sample.
    How to prepare a sample
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Set Focus on NumberField control.
    By Rupesh in forum 1.x Help
    Replies: 28
    Last Post: Apr 04, 2012, 2:03 PM
  2. Replies: 1
    Last Post: Dec 01, 2011, 12:34 PM
  3. Replies: 1
    Last Post: Nov 28, 2011, 3:40 PM
  4. Replies: 2
    Last Post: Sep 22, 2011, 3:13 PM
  5. Replies: 5
    Last Post: Jan 06, 2010, 11:35 AM

Tags for this Thread

Posting Permissions