1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default FormPanel - custom xtype ???

    FormPanel - custom xtype ???


    Hi
    I am trying to make a form using form panel.
    In the examples i seen only usage of textfield, textarea, htmleditor, tabs etc.

    I have a FormPanel, inside which i made tabpanel, and i want one of the tabs to have a custom design - not textfield or textarea but something i will make.
    How can i make such a custom field?

    snippet of my code:
    Code:
    new Ext.FormPanel,
    {
        initComponent: function()
        {
            Ext.apply(this, {
                layout:'fit',
                region:'center',
                border:false,
                items: {
                    xtype:'tabpanel',
                    activeTab: 0,
                    defaults:{autoHeight:true, bodyStyle:'padding:10px'},
                    items:[{
                        title:'General',
                        layout:'form',
                        defaults: {width: 300},
                        defaultType: 'textfield',
    
                        items: [{
                            fieldLabel: 'Title',
                            name: 'title',
                            allowBlank:false,
                            value: ''
                        },{
                            fieldLabel: 'Description',
                            name: 'description',
                            value: '',
                            xtype: 'textarea'
                        },{
                  NEED A NEW CUSTOM FIELD HERE
                       }]
                    }]
                },
    
                buttons: [{
                    text: 'Save'
                },{
                    text: 'Cancel'                
                }]
            });
        }
    });

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    just put your custom field in that location new YourCustomField or when you make your class register an xtype and use it like the others show.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I think you should probably read up on extending in the wiki though. That code you posted is.......well, not usable.

  4. #4
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    I updated my code (it was only part of it posted before)
    I manage to show my component now.
    But how can i add a label before it, like in case of textfield and textarea?

    Code:
    WebOrganizer.NewItemPanel = Ext.extend(Ext.FormPanel,
    {
        constructor: function(categoryId)
        {
            WebOrganizer.NewItemPanel.superclass.constructor.call(this);
            this.categoryId = categoryId;
        },
    
        initComponent: function()
        {
            Ext.apply(this, {
                layout:'fit',
                region:'center',
                border:false,
                //                labelWidth: 75,
                //            autoScroll: true,
                items: {
                    xtype:'tabpanel',
                    activeTab: 0,
                    defaults:{autoHeight:true, bodyStyle:'padding:10px'},
                    items:[{
                        title:'General',
                        layout:'form',
                        defaults: {width: 300},
                        defaultType: 'textfield',
    
                        items: [{
                            fieldLabel: 'Title',
                            name: 'title',
                            allowBlank:false,
                            value: ''
                        },{
                            fieldLabel: 'Description',
                            name: 'description',
                            value: '',
                            xtype: 'textarea'                       
                        },                      
                                new Ext.Panel({title:'title'})
                        ]
                    },{
                        title:'Fields',
                        layout:'form',
                        defaults: {width: 250},
                        defaultType: 'textfield',
    
                        items: [{
                            fieldLabel: 'Home',
                            name: 'home',
                            value: '(888) 555-1212'
                        },{
                            fieldLabel: 'Business',
                            name: 'business'
                        },{
                            fieldLabel: 'Mobile',
                            name: 'mobile'
                        },{
                            fieldLabel: 'Fax',
                            name: 'fax'
                        }]
                    },{
                        title:'Image',
                        layout:'form',
                        defaults: {width: 230},
                        defaultType: 'textfield',
    
                        items: [{
                            fieldLabel: 'Home',
                            name: 'home',
                            value: '(888) 555-1212'
                        },{
                            fieldLabel: 'Business',
                            name: 'business'
                        },{
                            fieldLabel: 'Mobile',
                            name: 'mobile'
                        },{
                            fieldLabel: 'Fax',
                            name: 'fax'
                        }]
                    }]
                },
    
                buttons: [{
                    text: 'Save'
                },{
                    text: 'Cancel',
                    scope:this,
                    handler: function()
                    {
                        this.dialogWindow.close();
                    }
                }]
            });
    
            WebOrganizer.NewItemPanel.superclass.initComponent.call(this);
        },
    
        setDialogWindow: function(dialogWindow)
        {
            this.dialogWindow = dialogWindow;
        }
    });
    
    WebOrganizer.NewItemDialog = function(categoryId)
    {
        var newItemPanel = new WebOrganizer.NewItemPanel(categoryId);
        var window = new Ext.Window({
            title    : 'New Item Dialog',
            closable : true,
            width    : 500,
            height   : 450,
            border   : false,
            plain    : true,
            resizable: false,
            layout   : 'border',
            items    : [newItemPanel]
        });
        newItemPanel.setDialogWindow(window);
    
        return window;
    };
    Last edited by archmisha; 19 Oct 2008 at 12:22 PM. Reason: posted code

  5. #5
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    what i get is:
    Attached Images

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Well, you're not saying (providing the code for) what your custom widget is, so my best guess at this point is that you'll need to specify some layout to get it to line up how you want it, perhaps a table layout.
    If your widget is a baseclass of formfield than you should be able to specify it like the other form fields.

  7. #7
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    I am trying to use table layout as u suggested.

    Having 2 troubles right now:
    1) how can i insert non text values into its cells? All i see in the examples is html attribute.
    2) the form have 2 parts: labelWidth and the textfield width. Seems it takes my component as the textfield width, and makes no label and thus it cant be aligned with the other components. Its width should be bigger but it wont let me.

    I hope i explain myself god enough

    Thanks

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    You might want to search for related extensions to figure out whatever it is you're trying to do. Also check the ext source for form field to gain insight.

    table layout is an idea out of the air, it's up to you the direction you take if that is even appropriate for what you're doing. You're providing little in the way of code or information that anyone can offer more specific help.

  9. #9
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    I will try to provide as much code and screenshots as possible because i am badly stack on this one.

    I am trying to make a form.
    Form that have regular textfields and textareas and in addition i wanted to add my custom field which is simply a panel i designed (panel that have some icons chooser etc).
    The problem was that there was no label like in textfield and thus i changed my custom field to have table layout and made a label with exactly same width as in the other textfields.
    My current problem is that the form gives my whole custom panel a width same as the textfield has without the label. So i am failing to align them all together. (shown in the screenshot below).
    The question is whether there is a solution to that, or maybe i must go the other way as u said and extending fieldform (which i have no idea how to do).

    Following the whole code and some screenshots.

    Praying for help Thank you for your time

    Code:
    Ext.ns('WebOrganizer');
    WebOrganizer.ItemPanel = Ext.extend(Ext.FormPanel,
    {
        constructor: function(categoryId, fieldProps)
        {
            this.categoryId = categoryId;
            this.fieldProps = fieldProps;
            WebOrganizer.ItemPanel.superclass.constructor.call(this);
        },
    
        initComponent: function()
        {
            var cfg = {
                url: WebOrganizer.JSP_PREFIX + 'newItem.jsp'
            };
    
            Ext.apply(this, cfg);
            Ext.applyIf(this.initialConfig, cfg);
    
            Ext.apply(this, {
                id: 'itemDialog',
                layout:'fit',
                region:'center',
                border:false,           
                items: {
                    xtype:'tabpanel',
                    activeTab: 0,
                    deferredRender: false, // so all tabs be rendered and filed with load values not only the active one.
                    defaults:{autoHeight:true, bodyStyle:'padding:10px'},
                    items:[{
                        title:'General',
                        layout:'form',
                        defaults: {width: 300},
                        defaultType: 'textfield',
    
                        items: [{
                            fieldLabel: 'Title',
                            name: 'title',
                            allowBlank:false,
                            value: ''
                        },{
                            fieldLabel: 'Description',
                            name: 'description',
                            value: '',
                            xtype: 'textarea'
                        },
                            new WebOrganizer.IconChooser()                       
                        ]
                    }]
                },
    
                buttons: [{
                    text: 'Save',
                    scope:this,
                    handler:function()
                    {
                        this.getForm().submit({
                            method:'POST',
                            waitTitle:'Saving',
                            waitMsg:'Please wait...',
                            scope:this,
    
                            success:function()
                            {
                                this.dialogWindow.close();
                            },
    
                            failure:function(form, action)
                            {
                                if (action.failureType == 'server')
                                {
                                    var obj = Ext.util.JSON.decode(action.response.responseText);
                                    Ext.Msg.alert('Login Failed!', obj.errors.reason);
                                }
                                else if (action.failureType == 'client')
                                {
                                    // todo: what should be herE? validation something..
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.failureType);
                                }
                                else
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                            }
                        });
                    }
                },{
                    text: 'Cancel',
                    scope:this,
                    handler: function()
                    {
                        this.dialogWindow.close();
                    }
                }]
            });
    
            WebOrganizer.ItemPanel.superclass.initComponent.call(this);
        },
    
        setDialogWindow: function(dialogWindow)
        {
            this.dialogWindow = dialogWindow;
        }
    });
    
    WebOrganizer.ItemDialog = function(title, categoryId, fieldProps)
    {
        var itemPanel = new WebOrganizer.ItemPanel(categoryId, fieldProps);
        var window = new Ext.Window({
            title    : title,
            closable : true,
            width    : 500,
            height   : 450,
            border   : false,
            plain    : true,
            resizable: false,
            layout   : 'border',
            items    : [itemPanel]
        });
        itemPanel.setDialogWindow(window);
        window.itemPanel = itemPanel;
    
        return window;
    };
    
    WebOrganizer.openNewItemDialog = function(btn, categoryId, callBackFP, title)
    {
        var con = new Ext.data.Connection();
        con.request({
            url: WebOrganizer.JSP_PREFIX + "/getFieldProps.jsp",
            //            params: {id:this.store.getAt(index).get('id')},
            method: 'POST',
            scope: this,
            success: function(responseObject)
            {
                var fieldProps = eval('(' + responseObject.responseText + ')').objects;
                var newItemDialog = WebOrganizer.ItemDialog(title || 'New Item Dialog', categoryId, fieldProps);
                newItemDialog.show(btn);
                if (callBackFP)
                    callBackFP(newItemDialog);
            },
            failure: function()
            {
                Ext.Msg.alert('Status', 'Unable to show history at this time. Please try again later.');
            }
        });
    }
    
    WebOrganizer.openItemDialog = function(btn, categoryId, itemId)
    {
        WebOrganizer.openNewItemDialog(btn, categoryId, function(newItemDialog)
        {       
            newItemDialog.itemPanel.getForm().load({
                method:'POST',
                url:WebOrganizer.JSP_PREFIX + 'getItem.jsp',
                params: {itemId: itemId},
                waitMsg:'Loading...'
            });
        }, 'Item Dialog');
    }
    Attached Images

  10. #10

Thread Participants: 1

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