Jump to content

unimdbgrid editor property


Recommended Posts

Using DBGrid Editors demo as starting point.

How can set the width of the detail panel editor and / or change element size?

Can we align panel at left?


Search inside code but I don't find where you create the detail panel.





Link to comment
Share on other sites



As said Farshad, "Editor" hard coded in Sencha Touch code ..
and I think in the next versions of these params will be available in the properties..

While, you can like this..

Ext.grid.plugin.Editable.override({onTrigger: function(g) {
    var i = this,
        a = i.getGrid(),
        k = i.getFormConfig(),
        c = i.getToolbarConfig(),
        d = i.getRecordByTriggerEvent(g),
        f, b, h, j;
    if (d) {
        if (k) {
            this.form = b = Ext.factory(k, Ext.form.Panel)
        } else {
            this.form = b = Ext.factory(i.getDefaultFormConfig());
            f = i.getEditorFields(a.getColumns());
        j = Ext.factory(c, Ext.form.TitleBar);
        j.down("button[action=cancel]").on("tap", "onCancelTap", this);
        j.down("button[action=submit]").on("tap", "onSubmitTap", this);
        this.sheet = h = a.add({
            xtype: "sheet",
            items: [j, b],
            hideOnMaskTap: true,
            enter: "left",             // <---------- default "enter: "right""
            exit: "left",              // <---------- default "enter: "right""
            left: 0,                   // <---------- default "right: 0"
            width: 320,                // <---------- default "width: 320"
            layout: "fit",
            stretchY: true,
            hidden: true
        if (i.getEnableDeleteButton()) {
                xtype: "button",
                text: "Delete",
                ui: "decline",
                margin: 10,
                handler: function() {
        h.on("hide", "onSheetHide", this);
        // Additionally added... width of the "label" as a percentage of the "total" width 
        // default 30%
        Ext.select('#'+a.id+' .x-form-label').elements.forEach(function(el){el.style["width"]="40%"});

* you can add this code to window.beforeInit

and you can use different combinations of animations ("enter", "exit"): left, right, top, bottom...



Best regards.

Link to comment
Share on other sites

Editor width is hard coded in Sencha Touch code but I can add a property to adjust field label widths.

Ok thanks.

The native editor is very usefull to build simple interface to configuration tables and speed up the coding.

Link to comment
Share on other sites

  • Create New...