Question

Hello friends I am stuck at a point in sencha touch 2.0.I am creating a screen in my app in which i need to get the checkbox values(checked or unchecked). i am referring this example from sencha documentation,but i am unable to understand how to use Ext.ComponentQuery.query(‘what here comes?’)[0].

EDIT

here’s my code:-

Ext.define('MyApp.view.groupList',{
    extend : 'Ext.navigation.View',
    requires: ['Ext.field.Search', 'Ext.TitleBar'],
    alias: "widget.groupList",
    itemId: "gList",
    initialize: function(){
        this.callParent(arguments),
        var checkBox = {
            xtype: 'checkboxfield',
              name : 'all',
            //  label: 'All',
              value: 'all',
              lableWidth: "0",
              width: 1,
              padding: '0 0 15 30',
              checked: false
        };

        var sendBtn = {
                itemId: 'sendBtn',
                xtype: 'button',
                text: 'Send',
                ui: 'action',
                handler: function() {
                    var check = Ext.ComponentQuery.query('navigationview')[0],
                        values = check.getValues();

                    Ext.Msg.alert(null,
                        "Selected All: " + ((values.all) ? "yes" : "no")

                    );
                }     
        };

        var topToolbar = {
            xtype : "toolbar",
            title : "Groups",
            docked : "top",
            items: [
                    checkBox,
                    {xtype: 'spacer'},      
                  //  searchBtn, 
                    sendBtn
            ],
        };
        var list = {
                xtype: "grlist",
                store: Ext.getStore("grStore")
        };

        this.add([list,topToolbar]);
    },

    config: {
        navigationBar: {
            hidden: true,
        },
    }
});

I am getting the following error:-

TypeError: Result of expression 'check.getValues' [undefined] is not a function. at
 file:///android_asset/www/app/view/group_list.js

So please make me understand how Ext.ComponentQuery works with some sample code or tutorial.

Thanx in advance.

Answer 1

Ext.ComponentQuery accepts 3 types of parameters:

• xtype, eg: Ext.ComponentQuery.query('navigationview')
• id, eg: Ext.ComponentQuery.query('my-nav-view-id')
• attributes, eg: Ext.ComponentQuery.query('navigationview[name="my nav view"]')

No matter which type the param is of, Ext.ComponentQuery.query() always returns an array of matched components. In the example, they add [0] because it’s assured that the result array contains only 1 item.

In your code, it seems that you tried to query a component of xtype navigationview, this kind of component does NOT have getValues methods (which is only available to Ext.form.Panel and derived classes). So if you want to retrieve the values, you have to use queries like this:

Ext.ComponentQuery.query('checkboxfield')[0]

Hope it helps.