1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    singh.roy is on a distinguished road

      0  

    Smile Unanswered: how to avoid using getCmp() to pull a fieldSet into view?

    Unanswered: how to avoid using getCmp() to pull a fieldSet into view?


    hi,
    i read in the link http://www.sencha.com/learn/architec...xt-js-4-part-3 that we should avoid using getCmp() as far as possible.
    i defined a fieldset in my view file like this-
    {
    xtype: 'fieldset',
    title: 'User Details',
    collapsible: true,
    layout: 'anchor',
    hidden: true,
    id :'UserDetailsFs',
    anchor: '100%',
    items :[
    {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    labelWidth: 60,
    items: [{
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'User ID',
    name: 'userId'
    }],
    flex: 1
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'User Name',
    name: 'userName'
    }],
    flex: 1
    }]
    },

    And i was using 'id' attribute with getCmp() in my controller to fetch it into the view.
    So how to design my controller so as to avoid using getCmp(). I tried the foll steps in controller like which is not working.
    refs: [{
    A component query
    selector: 'UserDetailsFs',
    ref: 'UserDetailsFs',

    selector: 'GridFs',
    ref: 'GridFs'


    }],

    onClickViewButton : function() {
    alert("Clicked openGrid");
    var gridmy = this.getGridFs();
    console.log(gridmy);
    var userPanel = this.getUserDetailsFs();
    gridmy.setVisible(false);
    userPanel.setVisible(true);
    },

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Answers
    467
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Use ComponentQuery, check out the container methods, down/up/child/query.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    singh.roy is on a distinguished road

      0  

    Smile


    hi, i am trying to use the component query this way in my controller , but it says that getUserDetailsFs() is not defined. My controller is as follows-

    refs: [{
    // A component query
    selector: 'UserManagementList> .fieldset> #userDetailsFs',
    ref: 'userDetailsFs'
    }],
    refs: [{
    // A component query
    selector: 'UserManagementList>.fieldset > #gridFs',
    ref: 'gridFs'
    }],


    init: function(application) {
    this.control({
    'UserManagementList #viewButton': {
    click: this.onClickViewButton
    }
    }),
    this.control({
    'UserManagementList #addButton': {
    click: this.onClickAddButton
    }
    });
    },

    onClickViewButton: function() {
    alert("click open form");
    //var userPanel = this.getUserDetailsFs();
    this.getUserDetailsFs().setVisible(true);
    //this.onClickViewButton().view.load();
    },
    onClickAddButton: function() {
    alert("click open grid");
    //var userPanel = this.getUserDetailsFs();
    this.getGridFs().setVisible(true);
    //this.onClickViewButton().view.load();
    }
    });
    My view for this is defined as-

    Ext.define('DEMO.view.userManagement.UserManagementList' ,{
    extend: 'Ext.form.Panel',
    alias: 'widget.UserManagementList',
    frame: true,
    bodyStyle: 'padding:15 15 15 15',
    id: 'userManagementForm',
    autoScroll: true,
    title: 'User Management',
    closable: true,
    tbar: [
    { xtype: 'button', text: 'Add' , id:'addButton' },
    { xtype: 'button', text: 'View', id:'viewButton' }
    ],

    items: [
    {
    xtype: 'fieldset',
    title: 'Search',
    collapsible: true,
    layout: 'anchor',
    //checkBoxName: true,
    hidden: false,
    id: 'searchfs',
    items: {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    items: [
    {
    xtype: 'textfield',
    fieldLabel: 'User Name',
    name: 'userName'
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'button',
    text : 'Search'
    }
    ]
    }
    },
    {
    xtype: 'fieldset',
    title: 'Grid',
    collapsible: true,
    layout: 'anchor',
    hidden:true,
    id: 'gridFs',
    items: {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    items: [
    {
    xtype: 'textfield',
    fieldLabel: 'User Name',
    name: 'userName'
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'button',
    text : 'Search'
    }
    ]
    }
    },{
    xtype: 'fieldset',
    title: 'User Details',
    collapsible: true,
    layout: 'anchor',
    hidden: true,
    id :'userDetailsFs',
    anchor: '100%',
    items :[
    {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    labelWidth: 60,
    items: [{
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'User ID',
    name: 'userId'
    }],
    flex: 1
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'User Name',
    name: 'userName'
    }],
    flex: 1
    }]
    },
    {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    labelWidth: 60,
    items: [{
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'textfield',
    fieldLabel: 'Department',
    name: 'department'
    }],
    flex: 1
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'combo',
    fieldLabel: 'Status',
    name: 'status',
    store: 'Statuss',
    displayField: 'name',
    valueField: 'abbr'
    }],
    flex: 1
    }]
    },
    {
    xtype: 'fieldcontainer',
    layout: 'hbox',
    labelWidth: 60,
    items: [{
    xtype: 'fieldcontainer',
    layout: 'anchor',
    anchor: '50%',
    items: [{
    xtype: 'combo',
    fieldLabel: 'Access Level',
    name: 'accessLevel',
    store: 'AccessLevels',
    displayField: 'name',
    valueField: 'abbr'
    }],
    flex: 1
    }, {
    xtype: 'splitter'
    }, {
    xtype: 'fieldcontainer',
    layout: 'column',
    items: [{
    xtype: 'checkboxgroup',
    fieldLabel: 'Roles',
    columnWidth: .60,
    //columns: 2,
    //vertical: true,
    items: [
    { boxLabel: 'Admin', name: 'cb', inputValue: '1', checked: true},
    { boxLabel: 'Approver', name: 'cb', inputValue: '2' },
    { boxLabel: 'Reviewer', name: 'cb', inputValue: '3' }
    ]
    }],
    flex: 1
    }]
    },
    {
    border: 0,
    buttonAlign: 'center',
    buttons:[
    {
    text:'Reset'
    }, {
    text:'Save'
    }
    ]
    }]

    },
    ],


    initComponent: function() {
    this.callParent(arguments);
    }
    });
    i was able to get the components with getCmp(), but am having a tough time with selectors and ref, help me resolve this. Am a beginner with ext-js so please point out of if am making any silly mistakes.

Thread Participants: 1