multiItemsGridTV now on github for testing

5,888 Posts

Bruno17 Reply #1, 15 years, 10 months ago

modx-Revo custom-Tv-input-type for muliple records in one TV.
Configurable tabbed form-window for record-fields.
You can apply most tv-input-types to the form.
Add multiple records in one TV, stored in json-format.
drag/drop-sortable grid.
Imagerenderer on grid with image-TV possible.

configurable form-window and grid-columns per TV-property-set.

example-input-properties included.

MIGX is official released now.
for Infos and discussions use this topic now: http://modxcms.com/forums/index.php?topic=63702.0

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

15 Posts

7U Reply #2, 15 years, 10 months ago

Tried it out, and followed the steps on the wiki..

Doesn’t work sad

Tried this in revo 2.0.5-pl

When i try to edit a row, a blank popup shows up.

5,888 Posts

Bruno17 Reply #3, 15 years, 10 months ago

firebug - request, response?
perhaps a sreenshot of your TV-property-set.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

15 Posts

7U Reply #4, 15 years, 10 months ago

I see 2 requests after clicking ’Edit’

http://MYDOMAIN/assets/components/multiitemsTV/connector.php?record_json=%7B%22title%22%3A%22%22%2C%22image%22%3A%22%22%7D&action=mgr%2Ffields&tv_id=19&class_key=modDocument&itemid=0&HTTP_MODAUTH=modx4d020486a2cb94.50048418

<h2>TV</h2>

<input type="hidden" class="mulititems_grid_item_fields" name="mulititems_grid_item_fields" value='[{"field":"title","caption":"Title","tv_id":19000000001,"array_tv_id":"19000000001[]"},{"field":"description","caption":"Description","inputTV":"richtext","tv_id":19000000002,"array_tv_id":"19000000002[]"},{"field":"image","caption":"Image","inputTV":"image","tv_id":19000000003,"array_tv_id":"19000000003[]"}]' />

<div id="modx-multiitemsgridtv-tabs">

    <div id="modx-tv-tab0" class="x-tab" title="Info">
    
    
    <div class="x-form-item x-tab-item  modx-tv" id="tv19000000001-tr">
        <label for="tv19000000001" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000001-caption">Title</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000001);" title=""></a>

                                </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000001" value="" />
            <input id="tv19000000001" name="tv19000000001"
	type="text" class="textfield"
	value=""
	
	tvtype=""
/>

<script type="text/javascript">
// <![CDATA[

var fld = MODx.load({

    xtype: 'textfield'
    ,applyTo: 'tv19000000001'
    ,width: '97%'
    ,enableKeyEvents: true

    ,listeners: { 'keydown': { fn:MODx.fireResourceFormChange, scope:this}}
});
MODx.makeDroppable(fld);

// ]]>
</script>
        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000001-caption',html: '[[*]]'});});</script>
    
    <div class="x-form-item x-tab-item alt modx-tv" id="tv19000000002-tr">
        <label for="tv19000000002" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000002-caption">Description</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000002);" title=""></a>

            <span class="modx-tv-description">Richtext</span>                    </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000002" value="" />
            <textarea id="tv19000000002" name="tv19000000002" class="modx-richtext" onchange="MODx.fireResourceFormChange();"></textarea>

<script type="text/javascript">
MODx.makeDroppable(Ext.get('tv19000000002'));
</script>
        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000002-caption',html: '[[*richtext]]'});});</script>
    
    </div>

    <div id="modx-tv-tab1" class="x-tab" title="Image">
    
    
    <div class="x-form-item x-tab-item  modx-tv" id="tv19000000003-tr">
        <label for="tv19000000003" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000003-caption">Image</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000003);" title=""></a>

            <span class="modx-tv-description">Image</span>                    </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000003" value="" />
            <div id="tvbrowser19000000003"></div>
<div id="tv-image-19000000003" style="width: 97%"></div>
<div id="tv-image-preview-19000000003">
    </div>

<script type="text/javascript">
// <![CDATA[

var fld19000000003 = MODx.load({

    xtype: 'modx-panel-tv-image'
    ,renderTo: 'tv-image-19000000003'
    ,tv: '19000000003'
    ,value: ''
    ,width: '97%'

    ,listeners: {
        'select': {fn:function(data) {
            MODx.fireResourceFormChange();
            var d = Ext.get('tv-image-preview-19000000003');
            if (Ext.isEmpty(data.relativeUrl)) {
                d.update('');
            } else {
                d.update('<img src="'+MODx.config.connectors_url+'system/phpthumb.php?h=150&w=150&src='+data.url+'&wctx=" alt="" />');
            }
        }, scope:this}
    }
});
MODx.makeDroppable(Ext.get('tv19000000003'),function(v) {
    var cb = Ext.getCmp('tv19000000003');
    if (cb) {
        cb.setValue(v);
    }
    fld19000000003.fireEvent('select',{relativeUrl:v});
    return '';
});

// ]]>
</script>

        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000003-caption',html: '[[*image]]'});});</script>
    
    </div>
</div>


<script type="text/javascript">
// <![CDATA[
Ext.onReady(function() {    

    MODx.load({
        xtype: 'modx-tabs'
        ,applyTo: 'modx-multiitemsgridtv-tabs'
        ,activeTab: 0
        ,autoTabs: true
        ,border: false
        ,plain: true
        ,width: '800px'
        ,hideMode: 'offsets'
        ,autoScroll: true
        ,defaults: {
            bodyStyle: 'padding: 5px;'
            ,autoScroll: true
            ,autoHeight: true
        }
        ,deferredRender: false
    });
	});    
// ]]>
</script>




<br class="clear" />

http://MYDOMAIN/assets/components/multiitemsTV/connector.php?record_json=%7B%22title%22%3A%22%22%2C%22image%22%3A%22%22%7D&action=mgr%2Ffields&tv_id=19&class_key=modDocument&itemid=0&HTTP_MODAUTH=modx4d020486a2cb94.50048418

<h2>TV</h2>

<input type="hidden" class="mulititems_grid_item_fields" name="mulititems_grid_item_fields" value='[{"field":"title","caption":"Title","tv_id":19000000001,"array_tv_id":"19000000001[]"},{"field":"description","caption":"Description","inputTV":"richtext","tv_id":19000000002,"array_tv_id":"19000000002[]"},{"field":"image","caption":"Image","inputTV":"image","tv_id":19000000003,"array_tv_id":"19000000003[]"}]' />

<div id="modx-multiitemsgridtv-tabs">

    <div id="modx-tv-tab0" class="x-tab" title="Info">
    
    
    <div class="x-form-item x-tab-item  modx-tv" id="tv19000000001-tr">
        <label for="tv19000000001" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000001-caption">Title</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000001);" title=""></a>

                                </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000001" value="" />
            <input id="tv19000000001" name="tv19000000001"
	type="text" class="textfield"
	value=""
	
	tvtype=""
/>

<script type="text/javascript">
// <![CDATA[

var fld = MODx.load({

    xtype: 'textfield'
    ,applyTo: 'tv19000000001'
    ,width: '97%'
    ,enableKeyEvents: true

    ,listeners: { 'keydown': { fn:MODx.fireResourceFormChange, scope:this}}
});
MODx.makeDroppable(fld);

// ]]>
</script>
        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000001-caption',html: '[[*]]'});});</script>
    
    <div class="x-form-item x-tab-item alt modx-tv" id="tv19000000002-tr">
        <label for="tv19000000002" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000002-caption">Description</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000002);" title=""></a>

            <span class="modx-tv-description">Richtext</span>                    </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000002" value="" />
            <textarea id="tv19000000002" name="tv19000000002" class="modx-richtext" onchange="MODx.fireResourceFormChange();"></textarea>

<script type="text/javascript">
MODx.makeDroppable(Ext.get('tv19000000002'));
</script>
        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000002-caption',html: '[[*richtext]]'});});</script>
    
    </div>

    <div id="modx-tv-tab1" class="x-tab" title="Image">
    
    
    <div class="x-form-item x-tab-item  modx-tv" id="tv19000000003-tr">
        <label for="tv19000000003" class="modx-tv-label">

                        <span class="modx-tv-caption" id="tv19000000003-caption">Image</span>
            <a class="modx-tv-reset" href="javascript:;" onclick="MODx.resetTV(19000000003);" title=""></a>

            <span class="modx-tv-description">Image</span>                    </label>
        <div class="x-form-element modx-tv-form-element" style="padding-left: 200px;">
            <input type="hidden" id="tvdef19000000003" value="" />
            <div id="tvbrowser19000000003"></div>
<div id="tv-image-19000000003" style="width: 97%"></div>
<div id="tv-image-preview-19000000003">
    </div>

<script type="text/javascript">
// <![CDATA[

var fld19000000003 = MODx.load({

    xtype: 'modx-panel-tv-image'
    ,renderTo: 'tv-image-19000000003'
    ,tv: '19000000003'
    ,value: ''
    ,width: '97%'

    ,listeners: {
        'select': {fn:function(data) {
            MODx.fireResourceFormChange();
            var d = Ext.get('tv-image-preview-19000000003');
            if (Ext.isEmpty(data.relativeUrl)) {
                d.update('');
            } else {
                d.update('<img src="'+MODx.config.connectors_url+'system/phpthumb.php?h=150&w=150&src='+data.url+'&wctx=" alt="" />');
            }
        }, scope:this}
    }
});
MODx.makeDroppable(Ext.get('tv19000000003'),function(v) {
    var cb = Ext.getCmp('tv19000000003');
    if (cb) {
        cb.setValue(v);
    }
    fld19000000003.fireEvent('select',{relativeUrl:v});
    return '';
});

// ]]>
</script>

        </div>

        <br class="clear" />
    </div>
    <script type="text/javascript">Ext.onReady(function() { new Ext.ToolTip({target: 'tv19000000003-caption',html: '[[*image]]'});});</script>
    
    </div>
</div>


<script type="text/javascript">
// <![CDATA[
Ext.onReady(function() {    

    MODx.load({
        xtype: 'modx-tabs'
        ,applyTo: 'modx-multiitemsgridtv-tabs'
        ,activeTab: 0
        ,autoTabs: true
        ,border: false
        ,plain: true
        ,width: '800px'
        ,hideMode: 'offsets'
        ,autoScroll: true
        ,defaults: {
            bodyStyle: 'padding: 5px;'
            ,autoScroll: true
            ,autoHeight: true
        }
        ,deferredRender: false
    });
	});    
// ]]>
</script>




<br class="clear" />

Here’s a screenshot of my properties.. it’s still as the import

5,888 Posts

Bruno17 Reply #5, 15 years, 10 months ago

should send only one request, but looks ok so far.

which browser/os ?

you can also try a simple form with formtabs:

[{"caption":"Info",
"fields":
[{"field":"title","caption":"Title"}] 
}]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

15 Posts

7U Reply #6, 15 years, 10 months ago

I used Chrome 8.0.552.215 and Firefox 3.6.13 on Windows 7

I’ll try the simple form, 1 sec

EDIT
I finally get something in my popup with the simple form

I’ll try to add the desc and image field

EDIT 2
Crashed with

[{"caption":"Info",
"fields":
[{"field":"title","caption":"Title"},
{"field":"description","caption":"Description,"inputTV":"richtext"}]
}]

5,888 Posts

Bruno17 Reply #7, 15 years, 10 months ago

this is working?

[{"caption":"Info",
"fields":
[{"field":"title","caption":"Title"},
{"field":"image","caption":"Image,"inputTV":"image"}]
}]

Then, I think, something goes wrong with tinyMCE on client-side

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

15 Posts

7U Reply #8, 15 years, 10 months ago

Nope it doesn’t work either..

I think it has something to do with my TemplateVars ’image’ and ’richtext’

Although i named and configured these like you said in the wiki.
I didn’t put them in a category either.

5,888 Posts

Bruno17 Reply #9, 15 years, 10 months ago

category isn’t needed, also you don_t need to asign them to your template.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

5,888 Posts

Bruno17 Reply #10, 15 years, 10 months ago

someone else of you guys, who are watching this thread, could try it and has the same issues?

I installed it on my local-machine on complete fresh revo 2.0.5 and also on a web-server with 2.0.5 upgraded from 2.0.4

on windows xp and vista with firefox 3.6.x and chrome

all are working ok.
ok, chrome does not resize the window and tabs to correct width, but its working.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!