CMP: 2 inputs in one line?

41 Posts

patman Reply #1, 15 years, 8 months ago

Hi,

i have a, hopefully very simple, question. I have succesfully build my CMP and everything is fine. So i’m trying to improve the thing right now. One thing i’d like to improve is the styling of my forms (they extend MODx.Window). For example i want to have a date and a time field to appear in one line. Each of them reserving 50% of the window-width for its input and label. I tried to get it setting cls attributes and use css, but they elements are wrapped into quite a few divs so it doesn’t seem a proper solution to me.

I also tried to have a {tag: ’div’} inside the fields and assign two items to it, but in this case the labels aren’t rendered. Can i maybe pass a renderer?

Or is there another simple solution?

P.S: I’m trying to achieve some other styling improvements on my forms, such as good positioning of image-preview boxed. But i think once i have the above question answered i’ll maybe get there myself.

5,888 Posts

Bruno17 Reply #2, 15 years, 8 months ago

See how it’s done in TV with input-type date

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

41 Posts

patman Reply #3, 15 years, 7 months ago

Well this is just an xdatetime type... but my question was rather general. For example i want 2 textfields on one line, how do i achive this?

5,888 Posts

Bruno17 Reply #4, 15 years, 7 months ago

here is the file, which registers: xdatetime

/manager/assets/modext/util/datetime.js

function onRender renders here both fields in one tablerow.

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

41 Posts

patman Reply #5, 15 years, 7 months ago

thanks once again... but just to assure i understood: i have to overwrite the onrender function to achieve that, or in other words create my own form element to have this done?

because i thought there is maybe a way to achive this with config options, similar to:

    Ext.applyIf(config,{
        title: ...
        ,[...some other options...]
        ,fields: [{
            xtype: 'textfield'
            ,name: 'name'
            ,label: 'label'
        }, {
            // now here i want two fields on one line...
            xtype: '2fields1line' // or tag: '' or whatever
            ,fields: [ /* and here now definition for the two fields */ ]
        }]
    });

Well i tried a couple of variations of this one, but the best result i achived was to have the input fields without their labels.

But maybe i’m wrong and its not that simple, but i’m still hoping!

275 Posts

skndn60 Reply #6, 15 years, 7 months ago

Maybe an ExtJs CompositeField does the job?

http://dev.sencha.com/deploy/dev/docs/source/CompositeField.html#cls-Ext.form.CompositeField

MODx Revolution / MAMP / OS X

41 Posts

patman Reply #7, 15 years, 7 months ago

well that looks pretty nice! thank you. but not exactly what i was searching for...

if it had the labels rendered next to each input itself it would be perfect. wink

But thanks for all the efforts, i think there’s no very easy way to do that. Anyway i have some ideas how to achieve my goal waiting to be tried out.