What's New?

how to implement this code in extjs into coolite

Page 1 of 2 12 LastLast
  1. #1
    Feb 07, 2010, 9:57 PM

    how to implement this code in extjs into coolite

    hi, sorry my poor english! im dificulty with form column.

    how to implement code below in coolite!
    http://blog.rkn.com.br/2009/11/form-...e-extjs-3-0-x/


    appreciate your help!


  2. #2
    Feb 08, 2010, 11:07 AM

    RE: how to implement this code in extjs into coolite

    Well, the page you posted is in a language I dont understand, but based on the image there: I think you would find this link useful:

    https://examples1.ext.net/#/Form/FormPanel/Validation/
  3. #3
    Feb 08, 2010, 11:37 AM

    RE: how to implement this code in extjs into coolite

    sorry! im brazilian and my english is bad!

    what I want is make the override below on coolite.

    code:

    Ext.override(Ext.form.FormPanel, {
    vIconSpace: 20,
    colSpace: 5,
    labelWidth: 100,
    ajustFields:function(ff){
        Ext.each(ff.items, function(f, i){
            if((f)&&(f.items)){
                this.ajustFields(f); //MODIFICADO
            }

            var c1 = ff.items[i]; //Campo atual
            var c2 = ff.items[i-1]; //Campo anterior

            if(c1.col&&c2){
                function confField(c){
                    c.labelWidth = Ext.num(c.labelWidth, this.labelWidth); //Largura do Label
                    c.vIconSpace = Ext.num(c.vIconSpace, this.vIconSpace); //Espaço após o campo
                    c.colSpace   = Ext.num(c.colSpace,   this.colSpace); //Espaço antes do campo
                    c.width      = Ext.num(c.width,      100); //Largura padrão MODIFICADO
                    c.msgTarget  = c.msgTarget || this.msgTarget || Ext.form.Field.prototype.msgTarget;
                    c.labelAlign = c.labelAlign || this.labelAlign;
                }

                function calcWidth(w){
                    var x = w.width;
                    x += (w.msgTarget == 'side' ? w.vIconSpace : 0);
                    x += 5;
                    x += (w.labelAlign == 'top' ? 0 : w.labelWidth);
                    return x;
                }

                function createItem(field){
                    return {
                        width: calcWidth.createDelegate(this)(field),
                        border: false,
                        layout: 'form',
                        labelWidth: field.labelWidth,
                        items: field
                    }
                }

                function addColum(c, field){
                    c.items.push(createItem(field))
                }

                if(c2.layout!=='hbox'){
                    confField.createDelegate(this)(c2);
                    c2 = {
                        xtype:'container',//MODIFICADO
                        layout:'hbox',
                        border:false,
                        items:[createItem(c2)]
                    }
                }
                confField.createDelegate(this)(c1);
                c2.items[c2.items.length-1].width += c1.colSpace;
                addColum(c2,c1);
                c1 = c2;
                c2 = 0;

                ff.items[i] = c1;
                ff.items[i-1] = c2;
            }
            delete c1;
            delete c2;
        },this)
        if(Ext.isArray(ff.items)){
            for(i in ff.items){
                ff.items.remove(0);
            }
        }
    },
    createForm:Ext.form.FormPanel.prototype.createForm.createInterceptor(function() {
        this.ajustFields(this);
    })
})
  4. #4
    Feb 08, 2010, 12:18 PM

    RE: how to implement this code in extjs into coolite

    Looks like this code is using an HBOX layout which is not available in coolite yet unless you have the professional version and can get access to the 1.0 code base, I know HBOX is in there. I made a small sample page and it looks like it might work if the layout is available although I don't know for sure since I don't have the v1 stuff. If you have the v1 relase and want to try, just paste that override code in a page with this from and try it out. All you have to do is add a custom config item named 'col' with a value of true to the field you want the break on. 

    
<ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
        Frame="true" Height="210" Title="Title" Width="600">
        <Body>
            <ext:FormLayout runat="server" LabelWidth="60">
                <ext:Anchor>
                    <ext:TextField ID="TextField1" Width="195" runat="server" FieldLabel="Label1">
                    </ext:TextField>
                </ext:Anchor>
                <ext:Anchor>
                    <ext:TextField ID="TextField2" Width="195" runat="server" FieldLabel="Label2">
                        <CustomConfig>
                            <ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
                        </CustomConfig>
                    </ext:TextField>
                </ext:Anchor>
                <ext:Anchor>
                    <ext:TextField ID="TextField3" Width="490" runat="server" FieldLabel="Label3">
                    </ext:TextField>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
        <Buttons>
            <ext:Button ID="Button1" runat="server" Icon="Disk" Text="Submit">
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
  5. #5
    Feb 08, 2010, 12:49 PM

    RE: how to implement this code in extjs into coolite

    thanks a lot!

    it works fine!!!!!!

    below source complete the solution!

    code:

    <ext:ScriptContainer ID="ScriptContainer1" runat="server" />

<script type="text/javascript">
    Ext.override(Ext.form.FormPanel, {
        ajustaFields: function(ff) {
            Ext.each(ff.items, function(f, i) {
                if ((f) &amp;&amp; (f.items)) {
                    this.ajustaFields(f);
                }
                if (f.col) {
                    f.labelWidth = (typeof f.labelWidth === 'number') ? f.labelWidth : this.labelWidth || 100;
                    f.space = (typeof f.space === 'number') ? f.space : 25;
                    f.paddingLeft = (typeof f.paddingLeft === 'number') ? f.paddingLeft : 5;

                    ff.items[i - 1].labelWidth = (typeof ff.items[i - 1].labelWidth === 'number') ? ff.items[i - 1].labelWidth : this.labelWidth || 100;
                    ff.items[i - 1].space = (typeof ff.items[i - 1].space === 'number') ? ff.items[i - 1].space : 25;
                    if (ff.items[i - 1].layout == 'column') {
                        ff.items[i - 1].items.push({
                            //columnWidth:1,
                            width: f.width ? f.width + 10 + (this.labelAlign == 'top' ? 0 : f.labelWidth) : f.width,
                            border: false,
                            layout: 'form',
                            labelWidth: f.labelWidth,
                            style: 'padding-left:5px;',
                            items: f
                        })
                        ff.items[i] = 0;
                    } else {
                        ff.items[i] = {
                            layout: 'column',
                            anchor: '100%',
                            border: false,
                            items: [{
                                //columnWidth:1,
                                width: ff.items[i - 1].width ? ff.items[i - 1].width + ff.items[i - 1].space + (this.labelAlign == 'top' ? 0 : ff.items[i - 1].labelWidth) : ff.items[i - 1].width,
                                border: false,
                                layout: 'form',
                                labelWidth: ff.items[i - 1].labelWidth,
                                items: ff.items[i - 1]
                            }, {
                                //columnWidth:1,
                                width: f.width ? f.width + f.space + 5 + (this.labelAlign == 'top' ? 0 : f.labelWidth) : f.width,
                                border: false,
                                layout: 'form',
                                labelWidth: f.labelWidth,
                                style: 'padding-left:' + f.paddingLeft + 'px;',
                                items: f
}]
                            }
                            ff.items[i - 1] = 0;
                        }

                    }
                }, this)
                for (i in ff.items) {
                    ff.items.remove(0);
                }
            },
            createForm: Ext.form.FormPanel.prototype.createForm.createInterceptor(function() {
                this.ajustaFields(this);
            }),
            focusFirstEnabledField: function() {
                var i = this.getFirstEnabledField();
                if (i) {
                    i.focus(arguments);
                }
                return i;
            },
            getFirstEnabledField: function() {
                var x = null;
                Ext.each(this.form.items.items, function(i) {
                    if ((!i.hidden) &amp;&amp; (!i.disabled) &amp;&amp; (i.getXType() !== 'hidden')) {
                        x = i;
                        return false;
                    }
                }, this)
                return x;
            }
        })

   
</script>


<body>
    <form id="form1" runat="server">
        <ext:ScriptManager runat="server" ID="scriptMgr">
        </ext:ScriptManager>
     
     <ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
        Frame="true" Height="210" Title="Title" Width="750">
        <Body>
            <ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="60">
                <ext:Anchor>
                    <ext:TextField ID="TextField1" Width="100" runat="server" FieldLabel="Label1">
                    </ext:TextField>
                </ext:Anchor>
                <ext:Anchor>
                    <ext:TextField ID="TextField2" Width="100" runat="server" FieldLabel="Label2">
                        <CustomConfig>
                            <ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
                        </CustomConfig>
                    </ext:TextField>
                </ext:Anchor>
                <ext:Anchor>
                    <ext:TextField ID="TextField4" Width="100" runat="server" FieldLabel="Label2">
                        <CustomConfig>
                            <ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
                        </CustomConfig>
                    </ext:TextField>
                </ext:Anchor>
                <ext:Anchor>
                    <ext:TextField ID="TextField3" Width="490" runat="server" FieldLabel="Label3">
                    </ext:TextField>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
        <Buttons>
            <ext:Button ID="Button1" runat="server" Icon="Disk" Text="Submit">
            </ext:Button>
        </Buttons>
    </ext:FormPanel>  
    </form>
</body>
</html>
  6. #6
    Feb 08, 2010, 1:16 PM

    RE: how to implement this code in extjs into coolite

    Hi,

    Thanks for posting the completed sample. Looks cool.

    Out of interests sake, the above <ext:FormPanel> could be coded as follows in the v1.0 build.

    Example

     <ext:FormPanel 
    runat="server" 
    Title="Example"
    Padding="5"
    Frame="true" 
    Height="210" 
    Width="750"
    LabelWidth="60">
    <Items>
        <ext:TextField Width="100" runat="server" FieldLabel="Label1" />
        <ext:TextField Width="100" runat="server" FieldLabel="Label2">
            <CustomConfig>
                <ext:ConfigItem Name="col" Value="true" Mode="Raw" />
            </CustomConfig>
        </ext:TextField>
        <ext:TextField Width="100" runat="server" FieldLabel="Label3">
            <CustomConfig>
                <ext:ConfigItem Name="col" Value="true" Mode="Raw" />
            </CustomConfig>
        </ext:TextField>
        <ext:TextField Width="490" runat="server" FieldLabel="Label4" />
    </Items>
    <Buttons>
        <ext:Button runat="server" Icon="Disk" Text="Submit" />
    </Buttons>
</ext:FormPanel>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Feb 08, 2010, 1:18 PM

    RE: how to implement this code in extjs into coolite

    We're also working on a feature that might simplify the markup even further by eliminating some use of the CustomConfig objects. Here's a sample.

    Example

    <ext:FormPanel 
    runat="server" 
    Title="Example"
    Padding="5"
    Frame="true" 
    Height="210" 
    Width="750"
    LabelWidth="60">
    <Items>
        <ext:TextField Width="100" runat="server" FieldLabel="Label1" />
        <ext:TextField Width="100" runat="server" FieldLabel="Label2" Col="true" />
        <ext:TextField Width="100" runat="server" FieldLabel="Label3" Col="true" />
        <ext:TextField Width="490" runat="server" FieldLabel="Label4" />
    </Items>
    <Buttons>
        <ext:Button runat="server" Icon="Disk" Text="Submit" />
    </Buttons>
</ext:FormPanel>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Feb 09, 2010, 4:43 AM

    RE: how to implement this code in extjs into coolite

    Am I missing something here? What does that extra col config item do??
  9. #9
    Feb 09, 2010, 9:59 AM

    RE: how to implement this code in extjs into coolite

    The col is used by the form override method on the javascript side, from what I can tell, as the form is being created, this override code alters the layout of fields to use an HBox layout. The 'col' property defines the end of a row so if you have this:

    <ext:TextField Width="100" runat="server" FieldLabel="Label1" />
<ext:TextField Width="100" runat="server" FieldLabel="Label2" Col="true" />
<ext:TextField Width="100" runat="server" FieldLabel="Label3" Col="true" />
<ext:TextField Width="490" runat="server" FieldLabel="Label4" />
    the form will be rendered with 3 rows with label 1 and 2 on the same row, label 3 on a row and label 4 on a row.

    This code will not work on 8.x though because we don't have the hbox layout yet. In the next release there will be two new layouts, Hbox and Vbox, here is the extjs docs on it:

    http://www.extjs.com/deploy/dev/exam...yout/hbox.html


  10. #10
    Feb 09, 2010, 10:18 AM

    RE: how to implement this code in extjs into coolite

    Well, I have 1.0. But this config item does not make a difference. The form still renders with 4 rows..
Page 1 of 2 12 LastLast

Similar Threads

  1. what is the best practices/methods to implement security for ext.net and extjs applications
    By webclouder in forum Open Discussions
    Replies: 2
    Last Post: Mar 11, 2011, 7:23 PM
  2. How to mix Coolite with ExtJs?
    By dbassett74 in forum 1.x Help
    Replies: 1
    Last Post: Jun 17, 2009, 4:49 PM
  3. [CLOSED] help files for coolite? (extjs verses coolite)
    By pkellner in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 25, 2008, 12:19 PM
  4. COOLITE & EXTJS 2.0
    By t0ny in forum 1.x Help
    Replies: 0
    Last Post: Jul 29, 2008, 1:47 PM
  5. Coolite vs ExtJs Extender
    By Dave.Sanders in forum Open Discussions
    Replies: 4
    Last Post: Mar 11, 2008, 2:13 PM

Posting Permissions