Need help with custom TV (ExtJS, Gallery, Revolution)

- 74 Posts
florian.l Reply #1, 13 years, 11 months ago
I have the idea for a super simple gallery using a custom TV which should be possible because of Revolutions custom TV types.

I want a TV which consists of two parts: 1. image source, 2. alt text. Which means I need two text inputs. The first one (image source) should open the "MODx Browser" for easy upload and selecting.

I then want a button which adds another pair of image source + alt text. So one can assign multiple images to one TV.

The TV could look something like this:
```
assets/images/myfolder/image1.jpg=This is the alt text||assets/images/myfolder/image2.jpg=This is my little cat
```
The TV string could be parsed via "custom TV output" or a simple snippet.

I already managed to add another line of image + alt pair on button click. Unfortunately I am not experienced with enought with ExtJS at all. Is anyone here who understands my problem/idea and has some skills with ExtJS to accomplish it? I think this could be one simple clean way to add pictures.

Action draft:
The "real" TV input is hidden
You can see two input fields (maybe in table with legends)
Clicking the first one opens the MODx Browser
You can add more pairs via a button
Every time one leaves the focus of the "custom TV area" a string is saved to the "real" hidden TV
If the TV already contains a string, it is being separated into it’s pairs

4,149 Posts

splittingred Reply #2, 13 years, 11 months ago

For the ExtJS implementation, it’d be helpful to take a look at how the File/Image TVs do it:


MODx.combo.Browser = function(config) {
    config = config || {};
    Ext.applyIf(config,{
       width: 300
       ,triggerAction: 'all'
       ,browserEl: 'modx-browser'
    });
    MODx.combo.Browser.superclass.constructor.call(this,config);
    this.config = config;
};
Ext.extend(MODx.combo.Browser,Ext.form.TriggerField,{
    browser: null
    
    ,onTriggerClick : function(){
        if (this.disabled){
            return false;
        }
        
        if (this.browser === null) {
            this.browser = MODx.load({
                xtype: 'modx-browser'
                ,prependPath: this.config.prependPath || null
                ,prependUrl: this.config.prependUrl || null
                ,hideFiles: this.config.hideFiles || false
                ,rootVisible: this.config.rootVisible || false
                ,listeners: {
                    'select': {fn: function(data) {
                        this.setValue(data.relativeUrl);
                        this.fireEvent('select',data);
                    },scope:this}
                }
            });
        }
        this.browser.show();
        return true;
    }
    
    ,onDestroy: function(){
        MODx.combo.Browser.superclass.onDestroy.call(this);
    }
});
Ext.reg('modx-combo-browser',MODx.combo.Browser);

This creates a custom ExtJS xtype that can be used anywhere as ’modx-combo-browser’. You could easily extend this class, or reuse it, for your implementation. Note the ’select’ listener on the field - it is passed a ’data’ JSON object that has the data of the file that was selected.

Hope that helps.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com