I have a form within a form. I need to bind the hidden property of a field in the outer form to the checked state of a field in the inner form. I assume I can do this with binding by setting up a custom getter/setter but not exactly sure... here's the idea:
Sencha fiddle
You can do something like this:
Ext.define('Test.InnerForm', {
extend: 'Ext.form.Panel',
xtype: 'innerform',
defaultListenerScope: true,
config: {
isFoo: false
},
twoWayBindable: {
isFoo: true
},
publishes: ['isFoo'],
items:[{
xtype: 'checkbox',
fieldLabel:'cb',
listeners: {
change: 'onCheckChange'
}
}],
onCheckChange: function(box, checked) {
this.setIsFoo(checked);
}
});
Ext.define('Test.OuterForm', {
extend: 'Ext.form.Panel',
xtype: 'outerform',
viewModel: true,
items:[{
xtype:'innerform',
reference: 'innerform'
},{
xtype: 'textfield',
fieldLabel: 'want to hide this when cb is checked',
bind: {
hidden: '{innerform.isFoo}'
}
}]
});
Ext.create('Test.OuterForm', {
title: 'Outer form',
width: 500,
height: 500,
bodyPadding: 10,
renderTo: Ext.getBody()
});
Related
Please consider two modal windows that refer to the common container with the group of radiofield in the below fiddle.
https://fiddle.sencha.com/#view/editor&fiddle/3e45
Initially, the first radio R1 is correctly checked in containers of both windows. However, checking any radiofield on one of the windows unselects all the radiofield items on another window.
Two windows contain independent instances of the container, so it's unclear how they can affect each other. This behavior is not happening with any other elements (e.g. checkboxes), only radios.
Any ideas are very much appreciated.
Put/wrap your radio fieldset in form panel, in this case it will keep the value (yourForm.getValues()):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('fsContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.fsContainerHandler'
});
Ext.define('fsContainer', {
extend: 'Ext.form.Panel', // ---== Extending form now. ==---
xtype: 'xFSContainer',
sfx: '',
controller: 'fsContainerHandler',
items: [{
xtype: 'fieldset',
title: 'myFieldset',
reference: 'fsRef',
flex: 1,
items: [{
xtype: 'radiofield',
checked: true,
name: 'myRadio',
boxLabel: 'R1'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R2'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R3'
}]
}]
});
Ext.define('mainContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainContainerHandler',
singleton: true,
onButton1Click: function () {
var win = this.getView().window1;
win.show();
},
onButton2Click: function () {
var win = this.getView().window2;
win.show();
}
});
Ext.define('mainContainer', {
extend: 'Ext.container.Container',
width: 400,
height: 400,
controller: 'mainContainerHandler',
window1: null,
window2: null,
initComponent: function () {
this.window1 = Ext.create('window1');
this.window2 = Ext.create('window2');
this.callParent(arguments);
},
items: [{
xtype: 'button',
text: 'Window 1',
reference: 'btn1',
handler: mainContainerHandler.onButton1Click,
scope: mainContainerHandler
}, {
xtype: 'button',
text: 'Window 2',
reference: 'btn2',
handler: mainContainerHandler.onButton2Click,
scope: mainContainerHandler
}]
});
Ext.define('window1', {
extend: 'Ext.window.Window',
title: 'Window1',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.define('window2', {
extend: 'Ext.window.Window',
title: 'Window2',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.create('mainContainer', {
renderTo: document.body
});
}
});
See this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/36vh.
Even though the defaultFocus is set properly by referencing the component via #fldxyz, the component doesn't get the focus.
Ext.application({
name : 'myapp',
// autoCreateViewport is deprecated
mainView: 'myapp.MyPanel',
launch : function() {
}
});
Ext.define('myapp.MyPanel', {
extend: 'Ext.panel.Panel', // does not work
// extend: 'MyPanel', // works
layout: 'fit',
//defaultFocus: '[reference=fld]',
//defaultFocus: 'textfield:first',
defaultFocus: '#fldxyz',
items: [{
xtype: 'form',
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
value: 'Indigo',
id: 'fldxyz',
//reference: 'fld',
selectOnFocus: true
}, {
xtype: 'textfield',
fieldLabel: 'Last',
value: 'Montoya'
}]
}]
});
I tested it with 6.6.0 and 7.2.0.
What's wrong?
Thanks
In the doc of defaultFocus is following: Specifies a child Component to receive focus when this Container's method-focus method is called.
You are not calling the focus() method and it is not focused. I have added it in the 'afterrender' listener event.
Ext.application({
name : 'myapp',
mainView: 'myapp.MyPanel'
});
Ext.define('myapp.MyPanel', {
extend: 'Ext.panel.Panel',
title: "My Form Panel",
layout: 'fit',
defaultFocus: '#fldxyz',
items: [{
xtype: 'form',
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
value: 'Indigo',
id: 'fldxyz',
selectOnFocus: true
}, {
xtype: 'textfield',
fieldLabel: 'Last',
value: 'Montoya'
}]
}],
listeners: {
afterrender: function(formPanel) {
formPanel.focus();
}
}
});
I am trying to find the best way to bind items to a textfield in my extjs project. I downloaded the data into a store with one record in the controller. How would I bind to this textfield from the one record? I would preferably bind in the view, not in the controller
You should read this guide to understand better what binding is
The best solution for you is bind the record on the viewmodel of the view, so:
textfield.setBind({
value:'{myRec.valueToRefer}'
})
viewmodel.set('myRec',record.getData());
If you want, you can also use a form to handle this, using form.loadRecord and giving to the textfield a name..
A tip:
set inside the viewmodel a value to null:
data:{
myRec:null
}
Set your record in the viewmodel after setting the bind to the textfield.
Other tip:
If you can, avoid using setBind and prefer to set the binding directly on textfield creation:
//WILL WORK BUT YOU CAN AVOID IT
textfield.setBind({
value:'{myRec.valueToBind}'
})
//YES
var textfield=Ext.create({
xtype:'textfield',
bind:{
value:'{myRec.valueToBind}'
}
});
Refer to Sencha documentation also
You can use bind config to bind the data or any other config for ExtJS component.
Bind setting this config option adds or removes data bindings for other configs.
For example, to bind the title config:
var panel = Ext.create({
xtype: 'panel',
bind: {
title: 'Hello {user.name}'
}
});
To dynamically add bindings:
panel.setBind({
title: 'Greetings {user.name}!'
});
To remove bindings:
panel.setBind({
title: null
});
In this FIDDLE, I have created a demo for biding. I hope this will help/guide you to achieve you requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining Store
Ext.define('Store', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
formdata: null
},
stores: {
gridstore: {
type: 'gridstore'
}
}
});
//Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onGridItemClick: function (grid, record) {
//Bind the form data for CLICKED record
this.getViewModel().set('formdata', record)
}
});
//creating panel with GRID and FORM
Ext.create({
xtype: 'panel',
controller: 'myview',
title: 'Binding Example',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
layout: 'vbox',
items: [{
xtype: 'grid',
flex: 1,
width: '100%',
bind: '{gridstore}',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
itemclick: 'onGridItemClick'
}
}, {
xtype: 'form',
flex: 1,
width: '100%',
defaults: {
anchor: '100%'
},
title: 'Bind this form on Grid item Click',
bodyPadding:15,
margin: '20 0 0 0',
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'first',
allowBlank: false,
bind: '{formdata.name}'
}, {
fieldLabel: 'Email',
name: 'email',
allowBlank: false,
bind: '{formdata.email}'
}, {
fieldLabel: 'Phone',
name: 'phone',
allowBlank: false,
bind: '{formdata.phone}'
}]
}]
});
}
});
I want to use onkeyup event of text field, so we can count that character when enter the text.
enableKeyEvents: true
For key events to work, you need to explicitly specify it.
Working POC code:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'form',
height: 100,
items: [{
xtype: 'textfield',
fieldLabel: 'field label',
value: '1',
enableKeyEvents: true,
listeners: {
keyup: function() {
console.log("key Up called");
},
change: function() {
console.log('changed');
}
}
}]
}]
})
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2cbd
You are almost there. In the doc field key events, it is written that key events get fired only if enableKeyEvents is set to true.
{
xtype: 'textfield',
fieldLabel: 'Address',
width: '100%',
enableKeyEvents : true,
listeners: {
keyup : function(obj) {
alert('test fire ' + obj.getValue());
}
}
},
I'm having an issue with multiple instances of an ext js grid all showing the same data. I am using Ext js 4.1.1.
I have a main tab panel. In that panel, there are multiple people tabs. Inside each person tab is a details tab and a family tab.
The details tab is a simple form with text boxes, combo boxes, etc. The family tab has both a dataview and a grid.
If only one person tab is open at a time, everything works fine. As soon as a second person is opened, the family tabs look the same (both the dataview and the grid). It seems to me that the problem has something to do with the model. Perhaps they are sharing the same instance of the model, and that is causing one refresh to change all the data. The dataview and the grid both have the same problem, but I think that if I can fix the problem with the grid, then I can apply the same logic to fix the dataview. I will leave the code for the dataview out of this question unless it becomes relevant.
PersonTab.js
Ext.require('Client.view.MainTab.PersonDetailsForm');
Ext.require('Client.view.MainTab.PersonFamilyForm');
Ext.require('Client.view.MainTab.EventForm');
Ext.define('Client.view.MainTab.PersonTab',
{
extend: 'Ext.tab.Panel',
waitMsgTarget: true,
alias: 'widget.MainTabPersonTab',
layout: 'fit',
activeTab: 0,
tabPosition: 'bottom',
items:
[
{
title: 'Details',
closable: false,
xtype: 'MainTabPersonDetailsForm'
},
{
title: 'Family',
closable: false,
xtype: 'MainTabPersonFamilyForm'
},
{
title: 'page 3',
closable: false,
xtype: 'MainTabEventForm'
}
]
});
MainTabPersonFamilyForm.js
Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView');
Ext.require('Client.view.MainTab.PersonFamilyGrid');
Ext.define('Client.view.MainTab.PersonFamilyForm',
{
extend: 'Ext.form.Panel',
alias: 'widget.MainTabPersonFamilyForm',
waitMsgTarget: true,
padding: '5 0 0 0',
autoScroll: true,
items:
[
{
xtype: 'displayfield',
name: 'HeadOfHouseholdLabel',
value: 'The head of my household is:'
},
{
xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView'
},
{
xtype: 'checkboxfield',
boxLabel: "Use my Head of Household's address as my address",
boxLabelAlign: 'after',
inputValue: true,
name: 'UseHeadOfHouseholdAddress',
allowBlank: true,
padding: '0 20 5 0'
},
{
xtype: 'MainTabPersonFamilyGrid'
}
],
config:
{
idPerson: ''
}
});
MainTabPersonFamilyGrid.js
Ext.require('Client.store.PersonFamilyGrid');
Ext.require('Ext.ux.CheckColumn');
Ext.define('Client.view.MainTab.PersonFamilyGrid',
{
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
xtype: 'grid',
title: 'My Family Members',
store: Ext.create('Client.store.PersonFamilyGrid'),
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig:
{
plugins:
{
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns:
[
{ text: 'Name', dataIndex: 'Name'},
{ text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }},
{ xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }},
{ xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } }
],
height: 200,
width: 400,
buttons:
[
{
xtype: 'button',
cls: 'trash-btn',
iconCls: 'trash-icon-large',
width: 64,
height: 64,
action: 'trash'
}
]
});
PersonFamilyGrid.js (store)
Ext.require('Client.model.PersonFamilyGrid');
Ext.define('Client.store.PersonFamilyGrid',
{
extend: 'Ext.data.Store',
autoLoad: false,
model: 'Client.model.PersonFamilyGrid',
proxy:
{
type: 'ajax',
url: '/Person/GetFamily',
reader:
{
type: 'json'
}
}
});
PersonFamilyGrid.js (model)
Ext.define('Client.model.PersonFamilyGrid',
{
extend: 'Ext.data.Model',
fields:
[
'idFamily',
'idPerson',
'idFamilyMember',
'Name',
'Relationship',
'IsMyGuardian',
'IAmGuardian'
]
});
relevant code from the controller:
....
....
var personTab = thisController.getMainTabPanel().add({
xtype: 'MainTabPersonTab',
title: dropData.data['Title'],
closable: true,
layout: 'fit',
tabpanelid: dropData.data['ID'],
tabpaneltype: dropData.data['Type']
});
personTab.items.items[0].idPerson = dropData.data['ID'];
personTab.items.items[1].idPerson = dropData.data['ID'];
thisController.getMainTabPanel().setActiveTab(personTab);
....
....
You're setting the store as a property on your grid prototype and creating it once at class definition time. That means that all your grids instantiated from that class will share the exact same store.
Note that you're also creating a single cellediting plugin that will be shared with all instantiations of that grid as well. That definitely won't work. You likely will only be able to edit in either the first or last grid that was instantiated.
In general you should not be setting properties like store, plugins, viewConfig or columns on the class prototype. Instead you should override initComponent and set them inside that method so that each instantiation of your grid gets a unique copy of those properties.
Ext.define('Client.view.MainTab.PersonFamilyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
title: 'My Family Members',
height: 200,
width: 400
initComponent: function() {
Ext.apply(this, {
// Each grid will create its own store now when it is initialized.
store: Ext.create('Client.store.PersonFamilyGrid'),
// you may need to add the plugin in the config for this
// grid
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns: /* ... */
});
this.callParent(arguments);
}
});
It's hard to tell exactly, but from the code you have submitted it appears that you are not setting the id parameter on your tabs and your stores, which causes DOM collisions as the id is used to make a component globally unique. This has caused me grief in the past when sub-classing components (such as tabs and stores) and using multiple instances of those classes.
Try giving each one a unique identifier (such as the person id) and then referencing them using that id:
var personTab = thisController.getMainTabPanel().add({
id: 'cmp-person-id',
xtype: 'MainTabPersonTab',
...
store: Ext.create('Client.store.PersonFamilyGrid',
{
id: 'store-person-id',
...
});
Ext.getCmp('cmp-person-id');
Ext.StoreManager.lookup('store-person-id');
Hope that helps.