Develop Reference

Ext js form validator validate with unique names

I have Ext Form :
Ext.define('Count.view.AddJListForm', {
extend : 'Ext.form.Panel',
controller : 'List',
xtype : 'add-list',
name : 'addListForm',
cls : 'addFormToolbar',
width : '100%',
height : '100%',
layout : 'hbox',
fullscreen : true,
scrollable : true,
items :
[
{
xtype : 'titlebar',
title : 'Add New Name',
docked : 'top',
},
{
xtype : 'formpanel',
fullscreen : true,
items :
[
{
xtype : 'hiddenfield',
name : 'id'
},
{
xtype : 'textfield',
name : 'ListName',
maxLength : 100,
label : 'List name',
labelAlign : 'top',
required : true
},
{
xtype : 'numberfield',
name : 'Count',
maxLength : 10,
label : 'Count',
labelAlign : 'top',
required : true
},
]
},
{
xtype : 'toolbar',
ui : 'plain',
docked : 'bottom',
items :
[
{
xtype : 'spacer'
},
{
xtype : 'button',
text : 'CANCEL',
name : 'closeAddListFormView',
},
{
xtype : 'button',
text : 'SAVE',
name : 'formSave',
}
]
}
]
});
Controller function :
In this function to get the form values and stored into Database:
Ext.define('Count.view.ListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.JapaList',
control: {
'button[name=formSave]': {
tap : 'saveListData'
}
}
// File save function
saveListData : function(button, record)
{
var form = button.up('formpanel');
var values = form.getValues();
var BgImage = '';
var audioFile = '';
if(form.validate())
{
var ListName = values.ListName;
var Count = values.Count;
callBackSaveData var table = JapaCount.Db.tblJapaList;
toDbArray['ListName'] = ListName;
toDbArray['Count'] = Count;
Count.Db.dbInsertWithCallback(table,toDbArray, me.loadStore, me);
}
data stored on DB. But I need to validate ListName must be unique like a username. if there are any rerecords like the same name it should show an error. In this function were to check that validator or function? anyone have an idea please share

You can find record with ListName using method findRecord on instance of store.
let record = store.findRecord('ListName', ListName, 0, false, false, true);
if (!record) {
//do smth here if ListName not found
}

Adding form values into grid using extjs

In my JavaScript file I have the following store variable:
Ext.onReady(function() {
var store2 = Ext.create('Ext.data.Store', {
storeId : 'employeeStore',
fields : [ 'firstname', 'lastname', 'age' ],
data : [ {
firstname : "Michael",
lastname : "Scott",
age : "7",
}, {
firstname : "Caroline",
lastname : "Schrute",
age : "2",
}, {
firstname : "Jim",
lastname : "Halpert",
age : "3"
}, {
firstname : "Kevin",
lastname : "Malone",
age : "4",
}, {
firstname : "Angela",
lastname : "Martin",
age : "5",
} ]
});
and a couple lines after in my panel i have a couple of form fields:
Ext.create('Ext.form.Panel', {
title : 'Person Info',
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 900,
renderTo : Ext.getBody(),
layout : 'column',
// arrange fieldsets side by side
items : [
{
// ***** Person Info*****
// Fieldset in Column 1 - collapsible via toggle button
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Person Details',
collapsible : true,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
layout : 'anchor',
items : [
{
fieldLabel : 'First Name:',
name : 'PersonFirstName'
},
{
fieldLabel : 'Last Name:',
name : 'PersonLastname'
}
(etc...)
In this panel I also have a button that is suppose the store the values into a grid when clicked
{
text : 'Add Person',
xtype : 'button',
// margin: '0 0 0 100',
formBind : true,
// only enabled once the form is valid
disabled : true,
handler : function() {
// write code to add all fields to the grid
var form = this.up('form').getForm();
var vals = form.getValues();
store2.add(vals);
}
},
{
xtype : 'grid',
title : 'Family Details',
store : Ext.data.StoreManager.lookup('employeeStore'),
columns : [ {
text : 'First Name',
dataIndex : 'firstname',
type : 'string'
}, {
text : 'Last Name',
dataIndex : 'lastname',
type : 'string'
}, {
text : 'Age',
dataIndex : 'age',
type : 'string',
}, ],
width : 400,
forceFit : true,
renderTo : Ext.getBody()
} ]
When I press the button I'm not able to see the values in the grid. It's only returning an empty row.

You might have to add the proxy config to your store and check once.
For more info check this example from sencha here
And also check whether your store is loaded or not.

It's hard to tell where exactly the problem. I would start as following:
Remove from the grid all the columns and stay with only one. (lastname for example)
This step will check if the problem is occurred because mapping data to the state.
When you are clicking the button , use dummy data first in order to see that appending to the store is working.
var objectCollection = new Array();
var objectItem = new Object();
objectItem.lastname = "TestName";
objectCollection.push(objectItem);
store2.loadData(objectCollection);
In addition , I see that you defined values in store , but do not use 'autoLoad' property.
It should populated as true ('autoLoad:true').

Form field names should match with the grid columns data index . in our case form field name of person first name is "name : 'PersonFirstName'" so data index of the grid column Firs name should be "PersonFirstName" or vice versa.

Store data not updated to List

A listview in Sencha Touch. I have tried almost all the solutions provided in similar questions in stackoverflow. I'm not able to do get the data in store to display for this List.
var alertTypeStore = Ext.create('Ext.data.Store', {
storeId : 'AlertTypeStore',
id : 'AlertTypeStore',
fields : [ 'Description' ],
data : [
{Description : 'test1'},
{Description : 'test2'}
]
});
Ext.define('myapp.view.alerts.Alerts', {
extend : 'Ext.List',
itemTpl : '{Description}',
store : alertTypeStore,
requires : [ 'Ext.TitleBar' ],
xtype : 'alerttypelist',
id : 'alertTypeList',
itemTpl : '<div>{Description}</div>',
config : {
alias : "widget.alerttypelist",
itemId : 'alertTypeList',
cls : 'panelBackground',
items : [ {
xtype : 'titlebar',
title : 'Alert Types',
docked : 'top',
cls : 'headerbar',
items : [ {
xtype : 'button',
text : 'Back',
id : 'subviewBackBtn'
}]
} ]
}
});
Why isn't the two items not getting updated in the list? Please Help. Thank you. I'm a beginner in Sencha Touch.

You must put the store and itemTpl in the config, not the root object.
This will work:
Ext.define('myapp.view.alerts.Alerts', {
extend: 'Ext.List',
config: {
itemTpl : '<div>{Description}</div>',
store : alertTypeStore,
}
});

Extjs 4 catching combobox selected value in button click

I'm just beginning with Extjs 4, and I need to get the selected value of a combobox to change stores and rendering a chart corresponding to the data of each store.
I'm using the MVC model, here's my view containing comboboxes :
Ext.define('Metrics.view.Params', {
extend: 'Ext.grid.Panel',
alias: 'widget.params',
title: 'Select Parameters',
hideHeaders: true,
initComponent: function() {
this.columns = [{
dataIndex: 'name',
flex: 1
}];
this.dockedItems = [{
xtype: 'container',
items: [{
xtype: 'combobox',
id : 'cmbGraph',
mode : 'queryMode',
name : 'graph',
fieldLabel: 'Graph',
store: ['Small data','Big data'],
editable : false
},
{
//another combobox here..
}]
And my controller is :
Ext.define('Metrics.controller.RenderGraph', {
extend: 'Ext.app.Controller',
refs: [{
ref : 'params',
selector : 'params'
}],
stores: ['GraphData'],
init: function() {
// Start listening for events on views
this.control({
'paramsbtn button[action=apply]': {
click : this.launchChart
}
});
launchChart : function(button){
var params = this.getParams();
var combo1 = params.items[cmbGraph];
console.log(Ext.encode(combo1));
var v = combo1.getValue();
var r = combo1.findRecord(combo1.valueField || combo1.displayField,v);
return(combo1.store.indexOf(r));
console.log('combo item' + r + 'selected');
}
As you can see, I'm trying to get the value of the combobox with the ID = cmbGraph, but it's not working, the error message I get is :
Uncaught TypeError: Cannot call method 'getValue' of undefined
It's complicated with Extjs 4 because I have to get to an element of a view with my controller.
Any help would be much appreciated.

You could also keep the refs so you can reuse them if you need to and use something like this if you wanted:
refs: [{
ref : 'graph',
selector : 'params > container > combobox'
}],
or
refs: [{
ref : 'graph',
selector : 'params #cmbGraph'
}],
or even straight:
refs: [{
ref : 'graph',
selector : '#cmbGraph'
}],
These should all give you the same reference to the combobox. Just depends on how you arrange your code.
var comboValue = me.getGraph().getValue();

Component selector in Extjs 4

I'm trying to select multiple objects (2 labels & 2 textfields) that are located in a panel. I gave these components a property (changeVisibility: true).
So the thing i'm trying to accomplish here is quite simple: when the user checks the checkbox, all the components with the property (changeVisibility:true) should become invisible. So in my controller i'm trying to select these components but i'm unable to accomplish this thusfar.
Help is much appreciated!
Code of my panel:
Ext.define('Edocs.view.wizard.card-2.content.mobile-password.Panel', {
extend : 'Ext.FormPanel',
alias : 'widget.mobilePassword',
layout : {
type : 'vbox',
pack: 'center'
},
bodyStyle:{"background-color":"beige"},
border:false,
defaults:{
width: '100%'
},
items: [{
xtype : 'checkboxfield',
boxLabel : 'Enable mobile (iphone) accesibility',
boxLabelAlign : 'before',
name : 'enableMobile',
inputValue : '1',
id : 'cbxMobile',
itemId : 'cbxMobile'
},{
xtype: 'label',
text: "Please enter a password to connect to the platform by mobile (iphone/ipad)",
style: 'font-weight:bold;',
changeVisibility :true
},{
xtype: 'textfield',
name: 'mobilePassword',
id: 'txtMobilePassword',
inputType: 'password' ,
changeVisibility :true
//width: '100%'
},{
xtype: 'label',
text: "Confirm password",
style: 'font-weight:bold;',
changeVisibility :true
},
{
xtype: 'textfield',
name: 'mobilePasswordConfirm',
itemId: 'txtMobilePasswordConfirm',
inputType: 'password' ,
vtype: 'password',
initialPassField: 'txtMobilePassword',
changeVisibility :true
}],
initComponent : function() {
Ext.apply(this, {})
this.callParent(arguments);
}
});
This is the function in my controller (this function is called on the change event of the checkbox):
addMobilePassword : function(checkbox) {
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
if (checkbox.checked){
for (var i in items){
items[i].setVisible(false);
}
}
}
I'm having troubles with this selector:
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
If anyone could give me some advice on how to select these components.
Thanks!

down() will find the first matched descendant of the container. So I think you should try:
checkbox.up().down('mobilePassword').query('label[changeVisibility], textfield[changeVisibility]')
or briefer
checkbox.up().query('label[changeVisibility], textfield[changeVisibility]')

Try query('[changeVisibility=true]')