1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    32
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default Ext.ux.form.field.Markdown

    Ext.ux.form.field.Markdown
    Make your markdown component a field

    Download link here
    Requires Ext.ux.form.ExtendedFieldContainer
    Requires Ext.ux.markdown.Panel (not this also needs Ext.ux.util.Dependencies and Ext.ux.util.IsReady)

    Creates a markdown field for your forms - you can ask for the delivered values to be delivered as HTML or markdown - use it like you use Ext.ux.markdown.Panel (link to forum post) and you use a normal field.

    Config
    The config options of the markdown panel are also available in its field form - and the following config options are ported into the textarea used (or you can deliver more by giving using a textarea config option like you do with the markdown panel).
    • 'grow'
    • 'growAppend'
    • 'growMax'
    • 'growMin'
    • 'allowBlank'
    • 'outputValue
    • 'inputValue'
    • 'textarea'
    • 'stylesPath'
    • 'controlTags'
    How to use
    Like you use a field - although you have more methods available

    Methods
    Access the markdown panel editor and all the goodies there via getEditor() (read about in the markdown panel post)

    The code if you do not like to touch strangers links
    Code:
    Ext.define('Ext.ux.form.field.Markdown', {
        alias: [
            'widget.markdownfield', 'widget.markdownformfield',
            'widget.markdownField', 'widget.markdownFormField',
            'widget.MarkdownField', 'widget.MarkdownFormField'
        ],
        extend: 'Ext.ux.form.ExtendedFieldContainer',
        requires: ['Ext.ux.markdown.Panel'],
        mixins: {
            isready: 'Ext.ux.util.IsReady'
        },
        markdownConfigs: [
            'controlTags',
            'inputValue',
            'stylesPath',
            'outputValue'
        ],
        textareaConfigs: [
            'grow',
            'growAppend',
            'growMax',
            'growMin',
            'allowBlank'
        ],
        _editor: null,
        initComponent: function() {
            var field = this;
            field.callParent();
            field.addEvents(
                /**
                 * @event editorready
                 */
                'editorready'
            );
            // Init mixins (make isready obsolete!)
            field.initIsReady();
            field.on({
                'beforerender': {
                    fn: function() {
                        var editorConfig,
                            initialConfig,
                            initialValue,
                            markdownConfigs,
                            textareaConfigs;
                        
                        markdownConfigs = field.markdownConfigs;
                        textareaConfigs = field.textareaConfigs;
                        initialConfig = field.initialConfig;
                        initialValue = initialConfig.value;
                        editorConfig = {
                            xtype: 'markdownpanel',
                            name: 'editor',
                            textarea: {
                                isFormField: false
                            },
                            listeners: {
                                'isready': {
                                    fn: function(editor) {
                                        var textarea = editor.getTextarea();
                                        field.applyComponentBind(textarea);
                                        field.fireEvent('editorready', field, editor);
                                        field.setReady();
                                    }
                                }
                            }
                        };
                        if ( initialValue ) {
                            editorConfig.value = initialValue;
                        }
                        Ext.Array.forEach(markdownConfigs, function(property) {
                            var value = initialConfig[property];
                            if ( typeof value !== 'undefined' )
                                editorConfig[property] = value;
                        });
                        Ext.Array.forEach(textareaConfigs, function(property) {
                            var value = initialConfig[property];
                            if ( typeof value !== 'undefined' )
                                editorConfig.textarea[property] = value;
                        });
                        field._editor = field.add(editorConfig);
                    },
                    single: true
                }
            });
            return field;
        },
        getEditor: function() {
            return this._editor;
        },
        getValue: function(output) {
            var field = this,
                editor = field.getEditor(),
                value;
            if ( editor ) {
                value = editor.getValue(output||'markdown');
            }
            else {
                value = field.superclass.getValue.call(field);
            }
            return value;
        },
        getSubmitValue: function() {
            return this.getValue();
        },
        resetOriginalValue: function() {
            var field = this,
                editor = field.getEditor();
            if ( editor && editor.getTextarea() ) {
                editor.getTextarea().resetOriginalValue();
            }
            else {
            
                field.on({
                    'editorready': {
                        fn: function(self, editor) {
                            if ( editor.getTextarea() ) {
                                editor.getTextarea().resetOriginalValue();
                            }
                        }
                    }
                });
            }
            return field.superclass.resetOriginalValue.call(field);
        },
        setValue: function(value) {
            var field = this,
                editor = field.getEditor();
            if ( editor ) {
                
                editor.setValue(value);
            }
            return field.superclass.setValue.call(field, value);
        }
    });

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    6,703
    Vote Rating
    182
    Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold

      0  

    Default

    Thank you for sharing your hard work!
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    15
    Vote Rating
    0
    gkohen is on a distinguished road

      0  

    Exclamation

    Looks like an interesting concept. is it possible to check what is wrong with the download link as it seems to be dead.
    Thanks

Thread Participants: 2