PDA

View Full Version : how to avoid using getCmp() to pull a fieldSet into view?



singh.roy
5 Oct 2011, 5:04 AM
hi,
i read in the link http://www.sencha.com/learn/architecting-your-app-in-ext-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);
},

evant
5 Oct 2011, 5:06 AM
Use ComponentQuery, check out the container methods, down/up/child/query.

singh.roy
7 Oct 2011, 4:02 AM
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.