Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Vote Rating
    0
    akshar_jamgaonkar is on a distinguished road

      0  

    Default Unanswered: Render Form panel in Tree data row

    Unanswered: Render Form panel in Tree data row


    Hi all,

    I want to render a form panel in the tree data row, how to a do this......when i use append and add normal HTML it goes pretty wll, but when i try to render a component in it , the operations fails.....


    so could any one guide me as to how do i insert/render a form panel inside treeprow.


    Thanks in Advance,

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I have not tried this. You might be able to create columns and do something like this:
    http://www.djengineer.com/ExtJSExamp...nelEditor.html

    Scott.

  3. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Have a look at my component: Its.grid.column.Component. It allows you to render components in grid cells. Below is an example to use this component to render forms along with other components in grid cells.
    Code:
    Ext.require([
        'Ext.picker.*',
        'Ext.form.*',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.panel.*',
        'Ext.chart.*',
        'Ext.chart.axis.Gauge',
        'Ext.chart.series.*',
        'Its.grid.column.Component'
    ]);
    
    
    Ext.onReady(function() {
        var store = Ext.create('Ext.data.Store', {
            fields:['taskname', 'status', 'done', 'assignTo', 'dep', 'date', {name:'qty', type: 'int'}],
            data:[
                {taskname:"Task 1", status:1, done: 10, assignTo:"Scott", dep:"Manangement", date: '2012-01-01', qty:20},
                {taskname:"Task 2", status:2, done: 30, assignTo:"John", dep:"Sales", date: '2012-01-12', qty:35},
                {taskname:"Task 3", status:2, done: 50, assignTo:"Smith", dep:"Accounting", date: '2012-01-21', qty:12},
                {taskname:"Task 4", status:3, done: 70, assignTo:"Smith", dep:"Accounting", date: '2012-01-05', qty:51}
            ]
        });
     
        Ext.create('Ext.grid.Panel', {
            title: 'Component Column Demo',
            name : 'task',
            store: store,
            width: 1200,
            height: 950,
            renderTo: Ext.getBody(),
            columns: [{
                text: 'Task name',
                flex: 1,
                dataIndex: 'taskname'
            },{ // chart column
                xtype: 'itscomponentcolumn',
                text : 'Chart',
                width: 200,
                dataIndex: 'done',
                items: function(value) {
                    return {
                        xtype: 'chart',
                        width: 200,
                        height: 150,
                        style: 'background:#fff',
                        animate: {
                            easing: 'elasticIn',
                            duration: 1000
                        },
                        store: Ext.create('Ext.data.Store', {
                            fields: ['gauge'],
                            data  : [{gauge: value}]
                        }),
                        insetPadding: 25,
                        flex: 1,
                        axes: [{
                            type: 'gauge',
                            position: 'gauge',
                            minimum: 0,
                            maximum: 100,
                            steps: 10,
                            margin: -10
                        }],
                        series: [{
                            type: 'gauge',
                            value: value,
                            field: 'gauge',
                            donut: false,
                            colorSet: ['#F49D10', '#ddd']
                        }]
                    }
                }
            },{ // column with a combobox
                    xtype: 'itscomponentcolumn',
                    text : 'Combobox',
                    name : 'status',
                    width: 160,
                    dataIndex: 'status',
                    items: function(value) {
                        return { 
                            xtype: 'combobox',
                            store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
                            value: value,
                            width: 130
                        }; 
                    }
                },{ // column with a spinner
                    xtype: 'itscomponentcolumn',
                    text : 'Spinner',
                    width: 50,
                    dataIndex: 'qty',
                    items: function(value) {
                        return {
                            xtype: 'spinnerfield',
                            value: value,
                            width: 25
                        };
                    }
                },{ // column with date picker
                    xtype: 'itscomponentcolumn',
                    text : 'Date picker',
                    dataIndex: 'date',
                    width: 200,
                    items: function(value) {
                        return {
                            xtype: 'datepicker',
                            width: 190,
                            value: new Date(value)
                        };
                    }
                },{ // column with checkboxes
                    xtype: 'itscomponentcolumn',
                    text : 'Checkbox',
                    defaultType: 'checkboxfield',
                    items: [{
                        boxLabel  : 'Anchovies',
                        name      : 'topping',
                        inputValue: '1',
                    }, {
                        boxLabel  : 'Artichoke Hearts',
                        name      : 'topping',
                        inputValue: '2',
                        checked   : true,
                    }, {
                        boxLabel  : 'Bacon',
                        name      : 'topping',
                        inputValue: '3',
                    }]
                },{ // column with two buttons
                    xtype: 'itscomponentcolumn',
                    text : 'Buttons',
                    align: 'center',
                    width: 60,
                    name : 'action',
                    sortable: false,
                    defaults: { // default configs applied for all items
                        xtype: 'button',
                        width: 'auto'
                    },
                    items: [{
                        iconCls: 'icon-modify',
                        action : 'modify',
                        tooltip: 'Modify this task'
                    },{
                        iconCls: 'icon-delete',
                        action : 'delete',
                        tooltip: 'Delete this task'
                    }]
                },{ // 
                    xtype: 'itscomponentcolumn',
                    text : 'Form',
                    align: 'center',
                    width: 210,
                    items: [{
                        xtype: 'form',
                        width: 200,
                        height: 100,
                        defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'First Name',
                            name: 'first',
                            allowBlank: false
                        },{
                            fieldLabel: 'Last Name',
                            name: 'last',
                            allowBlank: false
                        }],
    
    
                        // Reset and Submit buttons
                        buttons: [{
                            text: 'Reset',
                            handler: function() {
                                this.up('form').getForm().reset();
                            }
                        }, {
                            text: 'Submit',
                            formBind: true, //only enabled once the form is valid
                            disabled: true,
                            handler: function() {
                                var form = this.up('form').getForm();
                                if (form.isValid()) {
                                    form.submit({
                                        success: function(form, action) {
                                           Ext.Msg.alert('Success', action.result.msg);
                                        },
                                        failure: function(form, action) {
                                            Ext.Msg.alert('Failed', action.result.msg);
                                        }
                                    });
                                }
                            }
                        }]
                    }]
              }]
          });
    });

  4. #4
    Sencha User
    Join Date
    Aug 2014
    Posts
    13
    Vote Rating
    0
    ExtJsUser2255 is on a distinguished road

      0  

    Default


    Looks great!
    Does it work with ExtJs 5.0.1?
    When I add the 'require' to widget.itscomponentcolumn, my app doesn't render, no exceptions are thrown...