1. #41
    Ext User dandfra's Avatar
    Join Date
    Jun 2007
    Location
    Trento, Italy
    Posts
    122
    Vote Rating
    0
    dandfra is on a distinguished road

      0  

    Default Spirit, can you add a snippet of code?

    Spirit, can you add a snippet of code?


    I don't understand exactly what you are trying to do...
    Can you please add a snippet of code?
    Thanks

  2. #42
    Ext User philrl9's Avatar
    Join Date
    Jan 2008
    Posts
    18
    Vote Rating
    0
    philrl9 is on a distinguished road

      0  

    Question


    Has anyone implemented this code into an editable grid? It's working fine when editing a blank field. But, when I attempt to edit a field with data it's not behaving as expected (at least as I expect it to!).

    For example in one field I have an existing phone number: 999-999-9999.

    Here's my code for the field:

    Code:
       { 
        header: "Phone", 
        sortable: true, 
        dataIndex: 'PHONE',
        editor: new Ext.form.TextField({
                    allowBlank: false,
           plugins: [new Ext.ux.InputTextMask('(999)999-9999', true)]        
                 })
       },
    When I edit the field and try to change anything it's behaves inconsistently. If I erase all data in the field using the backspace key I can't type anything in the first position of the field. If I use the arrow key to get to a specific location and then delete and replace a character it works some of the time. It never adds the missing characters as defined in the mask ()-.

  3. #43
    Ext User bobbicat71's Avatar
    Join Date
    Dec 2007
    Location
    Italy
    Posts
    20
    Vote Rating
    0
    bobbicat71 is on a distinguished road

      0  

    Default


    Quote Originally Posted by philrl9 View Post
    Has anyone implemented this code into an editable grid? It's working fine when editing a blank field. But, when I attempt to edit a field with data it's not behaving as expected (at least as I expect it to!).

    When I edit the field and try to change anything it's behaves inconsistently. If I erase all data in the field using the backspace key I can't type anything in the first position of the field. If I use the arrow key to get to a specific location and then delete and replace a character it works some of the time. It never adds the missing characters as defined in the mask ()-.
    Hello, could you tell me what browser are you using?

  4. #44
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default


    Nice work, but I found a small bug. Using this:
    PHP Code:
                        new Ext.form.TextField({
                            
    fieldLabel:"SSN",
                            
    xtype:"textfield",
                            
    allowBlank:false,
                            
    plugins: [new Ext.ux.InputTextMask('999-99-9999'false)]
                        }), 
    works fine except it allows me to enter decimal points (. character). I need it to only accept the digits 0-9.

  5. #45
    Ext User philrl9's Avatar
    Join Date
    Jan 2008
    Posts
    18
    Vote Rating
    0
    philrl9 is on a distinguished road

      0  

    Default


    I'm using FF 2 (.0.0.12)
    Thanks.

  6. #46
    Ext User dandfra's Avatar
    Join Date
    Jun 2007
    Location
    Trento, Italy
    Posts
    122
    Vote Rating
    0
    dandfra is on a distinguished road

      0  

    Cool Maybe I reproduced your problem...

    Maybe I reproduced your problem...


    ...but maybe not...
    I reproduced your problem (maybe). If I'm not wrong your mask is (999)999-9999 but your phone numbers have this format: 123-123-1234. So there is a mismatch between the mask and the format and all goes wrong. The right mask is probably 999-999-9999.
    If this is not your problem, can you send me a whole example? I tried to reproduce your problem but it works for me (TM)
    Last edited by dandfra; 4 Mar 2008 at 8:36 AM. Reason: adding the right mask

  7. #47
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default


    I have not gotten this to work in the case where it is in a form that is lazily rendered. If I try and use it like:
    PHP Code:
    {
      
    fieldLabel'SSN #',
      
    namessn,
      
    allowBlankfalse,
      
    plugins: [new Ext.ux.InputTextMask('999-99-9999'false)]

    I get this error upon loading the page:
    this.field.getEl() has no properties on line 79 of InputTextMask.js.

    If I remove the plugins option, the page loads and runs fine, but obviously without the mask for social security numbers. I use this same form in another app where the form is rendered and displayed upon the initial layout, and it works fine. It seems it is only when the form rendering is deferred as it is in a collapsed panel.

  8. #48
    Ext User dandfra's Avatar
    Join Date
    Jun 2007
    Location
    Trento, Italy
    Posts
    122
    Vote Rating
    0
    dandfra is on a distinguished road

      0  

    Default Are you sure you are using the last version?

    Are you sure you are using the last version?


    The line with the error should be 83 in the last version.
    This is a bit strange since we are using it in lazy initialization... Look for example at http://cherryonext.googlecode.com/sv...utTextMask.htm

    Can you please verify if yours is the last version, and evantually send some more detail (ideally a whole example )

  9. #49
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default


    Quote Originally Posted by dandfra View Post
    The line with the error should be 83 in the last version.
    This is a bit strange since we are using it in lazy initialization... Look for example at http://cherryonext.googlecode.com/sv...utTextMask.htm

    Can you please verify if yours is the last version, and evantually send some more detail (ideally a whole example )
    Ok, here is the deal. First, it is line 79 in my version which I only downloaded yesterday. So I'm not sure how else to get the newest version. A version number in the comments at the top might be helpful. Line 79 reads:
    PHP Code:
    this.inputTextElement this.field.getEl().dom
    I am not able to post my entire source for the app as there are confidential portions, however I was making a set of static pages that duplicated the layout to be able to post and show the issue. But, the static test pages work.

    So now I either go line by line between the test version and the real app to see what is different, or I continue to work on the test version until I get the problem.

    Any suggestions or ideas as to what types of things can cause the error on this line so I know where to begin looking? Also, where is the official source for me to get the most current version? Thanks!

  10. #50
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default


    UPDATE: I broke the static test page with the same error!
    This is good because now I can post the code. It's also good because I know exactly what breaks it, but have no idea how to fix it.

    The issue is trying to use the same form config in more than one place. I create 2 form objects with one config, and those objects appear in 2 different containers. Without the InputTextMask plugin all is well, the forms work in both places. With the plugin, if I uncomment the 2nd container I get the error. If I comment it out so only one instance of the form is in the layout, it works. See my comments in the code starting with the word NOTE for the exact spot.

    The main page:
    PHP Code:
    <html>
    <
    head>
    <
    meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <
    meta HTTP-EQUIV="Expires" CONTENT="-1"/>

    <
    title>Testing ExtJS</title>
    <
    link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

    <!-- 
    LIBS -->
    <
    script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="TooltipFix.js"></script>
    <script type="text/javascript" src="InputTextMask.js"></script>
    <script type="text/javascript" src="complexform.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript">
    var eastPanel;
    var eastCards;

    Ext.onReady(function()
    {
        var workData = [
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
        ];
        var workReader = new Ext.data.ArrayReader({}, [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]);
        
        var workgrid = new Ext.grid.GridPanel({
            store: new Ext.data.Store({
                data: workData,
                reader: workReader
            }),
            columns: [
                {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
                {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
                {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
                {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 120, sortable: true,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                                dataIndex: 'lastChange'}
            ],
            viewConfig: {
                forceFit: false
            },
            renderTo: Ext.getBody(),
            title: 'Tab Grid One',
            tabTip: 'This is the first grid',
            stripeRows: false,
            frame: true
        });
        workgrid.getSelectionModel().selectFirstRow();
        
        var myData = [
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
        ];
        var myReader = new Ext.data.ArrayReader({}, [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]);
        
        var grid = new Ext.grid.GridPanel({
            store: new Ext.data.Store({
                data: myData,
                reader: myReader
            }),
            columns: [
                {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
                {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
                {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
                {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 120, sortable: true,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                                dataIndex: 'lastChange'}
            ],
            viewConfig: {
                forceFit: false
            },
            renderTo: Ext.getBody(),
            title: 'Tab Grid Two',
            tabTip: 'This is the second grid',
            stripeRows: false,
            frame: true
        });
        grid.getSelectionModel().selectFirstRow();
        
        var viewport = new Ext.Viewport(
        {
            layout:"border",
            renderTo: Ext.getBody(),
            items:[
                {
                    id: 'north',
                    region:"north",
                    title:"Testing Form Layouts",
                    bodyStyle:"background-color:#bacfff",
                    height:50,
                    buttons: [
                        {
                            handler: function() {
                                eastPanel.expand();
                                eastCards.getLayout().setActiveItem("newform");
                            },
                            text: "Show Form",
                            tooltip: "Click to show form"
                        }
                    ]
                },
                new Ext.Panel({
                    region:'center',
                    layout:'border',
                    items:[
                        new Ext.Panel({
                            region:"south",
                            bodyStyle:"background-color:#bacfff",
                            title:"Details",
                            height:80,
                            autoScroll:true,
                            collapsible:true,
                            split:true
                        }),
                        new Ext.TabPanel({
                            region:'center',
                            deferredRender:false,
                            activeTab:0,
                            items:[
                                workgrid,
                                grid
                                // NOTE: When I uncomment the following lines, I get the error <-----
                                /*,{
                                    xtype: 'panel',
                                    layout: 'fit',
                                    title: "Form",
                                    items: [
                                        testForm
                                    ]
                                }*/
                            ]
                        })
                    ]
                }),

                // right-side card layout panel
                eastPanel = new Ext.Panel(
                {
                    region: "east",
                    layout: "border",
                    width: 400,
                    minWidth: 262,
                    split: true,
                    animCollapse: false,
                    collapsible: true,
                    collapseMode: 'mini',
                    collapsed: true,
                    hideCollapseTool: true,
                    items: [
                        eastCards = new Ext.Panel(
                        {
                            region: "center",
                            layout: "card",
                            activeItem: 'qresults',
                            width:400,
                            items: [
                                {
                                    xtype: 'panel',
                                    id: 'newform',
                                    layout: 'fit',
                                    title: "New",
                                    items: [
                                        testForm2
                                    ]
                                },
                                new Ext.Panel(
                                {
                                    id: 'qresults',
                                    title: "Query Results",
                                    autoScroll: true,
                                    items: [ Ext.get("queryDiv") ]
                                })
                            ]
                        }),
                        {
                            region: "south",
                            xtype: "panel",
                            layout: "fit",
                            split: true,
                            animCollapse: false,
                            collapsible: true,
                            collapseMode: 'mini',
                            collapsed: true,
                            hideCollapseTool: true,
                            height: 200,
                            items: [ Ext.get("dummy") ]
                        }
                    ]
                }) // end main layout east pane
            ]/*,
            // See comment below for initialFormFix
            listeners: {
                afterlayout: {
                    fn: initialFormFix,
                    single: true
                }
            }*/
        });
        
        // Init the singleton.  Any tag-based quick tips will start working.
        Ext.QuickTips.init();
        
        // Apply a set of config properties to the singleton
        Ext.apply(Ext.QuickTips.getQuickTip(), {
            showDelay: 50,
            dismissDelay: 0,
            animCollapse: false,
            trackMouse: true,
            mouseOffset: [10, 10]
        });
    });//end onReady function

    // Call fixFormSize for each form that uses it upon initial layout
    // NOT USED in this version as it causes an error (since Form is not initially visible?)
    function initialFormFix()
    {
        fixFormSize(testform);
        // others would follow here if there is more than one form
    }

    // This makes the form buttons appear the way it is wanted.
    function fixFormSize(theform)
    {
        theform.suspendEvents();

        var formHeight = theform.getSize().height;
        var ctHeight = theform.ownerCt.getInnerHeight();

        if(formHeight >= ctHeight)
        {
            theform.autoHeight = false;
            theform.setHeight(ctHeight);
        }
        else
        {
            theform.syncSize();
        }

        theform.autoHeight = true;
        theform.resumeEvents();
    }
    </script>
    </head>

    <body>
        <div id="queryDiv">Query results</div>
        <div id="dummy">Hi.</div>
    </body>
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <meta HTTP-EQUIV="Expires" CONTENT="-1"/>
    </html> 
    complexform.js:
    PHP Code:
    Ext.ux.DateSearch Ext.extend(Ext.form.DateField, {
        
    initComponentExt.form.TwinTriggerField.prototype.initComponent,
        
    getTriggerExt.form.TwinTriggerField.prototype.getTrigger,
        
    initTriggerExt.form.TwinTriggerField.prototype.initTrigger,
        
    onTrigger1ClickExt.form.DateField.prototype.onTriggerClick,
        
    trigger1ClassExt.form.DateField.prototype.triggerClass,
        
    trigger2Class'x-form-search-trigger'
    });

    Ext.reg('datesearch'Ext.ux.DateSearch);

    var 
    formConfig = {
        
    autoHeight:true,
        
    autoScrolltrue,
        
    url'save.jsp',
        
    method'POST',
        
    onSubmitExt.emptyFn,
        
    labelAlign"right",
        
    labelWidth120,
        
    //defaults: { labelStyle: "font-weight:bold" },
        
    defaultType"textfield",
        
    monitorValidtrue,
        
    items: [
            {
                
    fieldLabel'Last Name',
                
    name'lastName',
                
    allowBlankfalse
            
    },
            {
                
    fieldLabel'First Name',
                
    name'firstName',
                
    allowBlankfalse
            
    },
            {
                
    fieldLabel'Middle Name',
                
    name'middleName',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'SSN #',
                
    xtype'textfield',
                
    name'ssn',
                
    allowBlankfalse,
                
    plugins: [new Ext.ux.InputTextMask('999-99-9999'false)]
            },
            {
                
    fieldLabel'Date of Birth',
                
    xtype:'datesearch',
                
    anchor:'70%',
                
    name'dob',
                
    allowBlankfalse,
                
    onTrigger2Click: function()
                {
                    
    southPanel.expand();
                    
    southPanel.getLayout().setActiveItem("history");
                    
    historyGrid.setTitle("Date of Birth");
                    
    historyGrid.store.load(
                    {
                        
    params: { table"ChangeLog"filter"like 'dob%'" }
                    });
                }
            },
            {
                
    xtype'panel',
                
    layout'column',
                
    items: [
                    {
                        
    layout:'form',
                        
    items: [
                            {
                                
    fieldLabel'Gender',
                                
    name'gender',
                                
    xtype'radio',
                                
    boxLabel'Female',
                                
    inputValue'F',
                                
    allowBlankfalse,
                                
    columnWidth0.5
                            
    }
                        ]
                    },
                    {
                        
    layout:'form',
                        
    items: [
                            {
                                
    hideLabel:true,
                                
    labelSeparator'',
                                
    name'gender',
                                
    xtype'radio',
                                
    boxLabel'Male',
                                
    inputValue'M',
                                
    allowBlankfalse,
                                
    columnWidth0.5
                            
    }
                        ]
                    }
                ]
            },
            {
                
    xtype'panel',
                
    layout'form',
                
    autoHeighttrue,
                
    bodyStyle"background:#bdc0d9; border:thin solid #AABBCC; margin-left:70px; margin-bottom:8px; width:185px",
                
    labelWidth48,
                
    items: [
                    {
                        
    fieldLabel'Race',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'White',
                        
    inputValue'W',
                        
    allowBlanktrue
                    
    },
                    {
                        
    labelSeparator'',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'Black',
                        
    inputValue'B',
                        
    allowBlanktrue
                    
    },
                    {
                        
    labelSeparator'',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'Hispanic',
                        
    inputValue'H',
                        
    allowBlanktrue
                    
    },
                    {
                        
    labelSeparator'',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'Asian',
                        
    inputValue'A',
                        
    allowBlanktrue
                    
    },
                    {
                        
    labelSeparator'',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'Native American',
                        
    inputValue'N',
                        
    allowBlanktrue
                    
    },
                    {
                        
    labelSeparator'',
                        
    name'race',
                        
    xtype'radio',
                        
    boxLabel'Other',
                        
    inputValue'O',
                        
    allowBlanktrue
                    
    }
                ]
            },
            {
                
    fieldLabel'Address 1',
                
    name'addr1',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'Address 2',
                
    name'addr2',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'Country',
                
    name'country',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'City',
                
    name'city',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'State',
                
    name'state',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'Zip Code',
                
    name'zipcode',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'Primary Phone #',
                
    name'phone1',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'Secondary Phone #',
                
    name'phone2',
                
    allowBlanktrue
            
    },
            {
                
    fieldLabel'E-mail',
                
    name'email',
                
    vtype'email',
                
    allowBlanktrue
            
    }
        ],
        
    buttons: [
            {
                
    text'Save',
                
    tooltip'Click to save',
                
    formBindtrue,
                
    handler: function()
                {
                    
    this.getForm().submit(
                    {
                        
    success: function(faction)
                        {
                        }
                    });
                }
            },
            {
                
    text'Cancel',
                
    tooltip'Click to cancel',
                
    handler: function()
                {
                }
            }
        ]
    };

    // Create form object and resize handler
    testForm = new Ext.form.FormPanel(formConfig);
    testForm.on('resize', function()
    {
        
    fixFormSize(this);
    });

    // Create form object and resize handler
    testForm2 = new Ext.form.FormPanel(formConfig);
    testForm2.on('resize', function()
    {
        
    fixFormSize(this);
    }); 
    Last edited by luv2hike; 5 Mar 2008 at 7:41 AM. Reason: code update

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar