Results 1 to 3 of 3

Thread: Add Filter in Rowwidget

  1. #1

    Default Add Filter in Rowwidget

    Hi,
    I am using Extjs Version6.5.1;
    In this am using Rowwidget.
    In this i added filter plugin but it is not applying.
    Below is my code.
    Please help in this how to add filter in Extjs rowwidget.

    Code:
    var companiesListJSONArray = [{
        "id": 1,
        "name": "Roodel",
        "phone": "602-736-2835",
        "price": 59.47,
        "change": 1.23,
        "lastChange": "10/8",
        "industry": "Manufacturing",
        "desc": "In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.",
        "pctChange": 2.11,
        "orders": [{
            "id": 1,
            "companyId": 1,
            "productCode": "96f570a8-5218-46b3-8e71-0551bcc5ecb4",
            "quantity": 83,
            "date": "2015-10-07",
            "shipped": true
        }]
    }, {
        "id": 2,
        "name": "Voomm",
        "phone": "662-254-4213",
        "price": 41.31,
        "change": 2.64,
        "lastChange": "10/18",
        "industry": "Services",
        "desc": "Curabitur at ipsum ac tellus semper interdum. Mauris ullamcorper purus sit amet nulla. Quisque arcu libero, rutrum ac, lobortis vel, dapibus at, diam.",
        "pctChange": 6.83,
        "orders": [{
            "id": 2,
            "companyId": 2,
            "productCode": "af7e56bf-09a9-4ff4-9b02-f5e6715e053b",
            "quantity": 14,
            "date": "2015-10-11",
            "shipped": false
        }]
    }];
    
    
    Ext.define('Company', {
        extend: 'Ext.data.Model',
    
    
        fields: [{
            name: 'name'
        }, {
            name: 'phone'
        }, {
            name: 'price',
            type: 'float'
        }, {
            name: 'change',
            type: 'float'
        }, {
            name: 'pctChange',
            type: 'float'
        }, {
            name: 'lastChange',
            type: 'date',
            dateFormat: 'n/j'
        }, {
            name: 'industry'
        }, {
            name: 'desc'
        }]
    });
    
    
    Ext.define('Order', {
        extend: 'Ext.data.Model',
    
    
        fields: [{
            name: 'companyId',
            reference: 'Company'
        }, {
            name: 'productCode'
        }, {
            name: 'quantity',
            type: 'number'
        }, {
            name: 'date',
            type: 'date',
            dateFormat: 'Y-m-d'
        }, {
            name: 'shipped',
            type: 'boolean'
        }]
    });
    
    
    Ext.onReady(function () {
        Ext.create('Ext.grid.Panel', {
            width: 750,
            height: 450,
            renderTo: 'companies_grid',
            title: "Expander Rows to show Company's orders",
            store: {
                model: 'Company',
                autoLoad: true,
                proxy: {
                    type: 'memory',
                    data: companiesListJSONArray
                }
            },
            plugins: {
                gridfilters: true
            },
            columns: [{
                text: 'Id',
                dataIndex: 'id',
                filter: {
                    type: 'string',
                    itemDefaults: {
                        emptyText: 'Search for...'
                    }
                }
            }, {
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                width: 140,
                text: 'Phone',
                dataIndex: 'phone'
            }],
            plugins: [{
                ptype: 'rowwidget',
                widget: {
                    xtype: 'container',
                    layout: {
                        type: 'vbox',
                        pack: 'start',
                        align: 'stretch'
                    },
                    // bind data, because container has no store config
                    bind: {
                        data: '{record}'
                    },
                    items: [{
                        flex: 1,
                        xtype: 'grid',
                        bind: {
                            store: '{record.orders}',
                            title: 'Orders for {record.name}'
                        },
                        columns: [{
                            text: 'Order Id',
                            dataIndex: 'id',
                            width: 175
                        }]
                    }, {
                        xtype: 'splitter'
                    }, {
                        xtype: 'grid',
                        flex: 1,
                        bind: {
                            store: '{record.orders}',
                            title: 'Orders for {record.name}'
                        },
                        columns: [{
                            text: 'Procuct code',
                            dataIndex: 'productCode',
                            width: 265
                        }]
                    }]
    
    
                }
            }]
        });
    });
    Thanks
    Kamalakar Reddy V

    [/HTML]

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Hi there- I have shared this with the support team and asked thet they reach out to you to provide some assistance. Thanks for your patience!

    Michele

  3. #3
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    542
    Answers
    7

    Default

    Hello Kamalakar,

    Your plugins array was being overridden. See fiddle


    https://fiddle.sencha.com/#view/editor&fiddle/2pc5

    Regards,
    Kumar
    Sencha Support.

Similar Threads

  1. Add Filter in Rowwidget
    By kamalakarreddy vancha in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 6 Jan 2019, 1:06 AM
  2. Add Filter in Rowwidget
    By kamalakarreddy vancha in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 6 Jan 2019, 12:09 AM
  3. rowwidget
    By bindumisra in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 17 Nov 2016, 9:26 PM
  4. Getting Data for the RowWidget
    By kerbo in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 28 Sep 2016, 7:18 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •