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
}

How to Call an Extjs store without creating an explicit instance of it

I have an application which has is its first page build with different component.I am creating a userStore instance on page load(main.js) I want to access userStore in my header to get the firstname of user and display it on the header section.
Ext.create('store.User', {
storeId : 'storeUser'
});
Ext.define('OnlineApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport'
],
controller : 'main',
viewModel : 'main',
layout : 'border',
padding : '0 0 0 0',
bodyStyle : 'border:0',
items : [
{
xtype : 'appHeader',
region : 'north'
},
{
xtype : 'tabpanel',
region : 'center',
bodyPadding : 0,
id : 'contentPanel',
reference : 'contentPanel',
layout : 'card',
border : false,
scrollable : true,
tabBar : {
hidden : true
},
items : [
firstPage,
contentFrame,
],
},
{
xtype : 'footer',
region : 'south'
}
]
});
** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.**
Ext.define('OnlineApp.view.Header', {
extend: 'Ext.container.Container',
xtype : 'appHeader',
id : 'main-header',
height : 100,
layout : {
type : 'hbox',
align : 'middle'
},
initComponent: function() {
this.items = [
{
xtype : 'container',
flex : .55,
layout : {
type: 'vbox',
align : 'right'
},
collapsible : false,
padding : 5,
items : [
{
xtype : 'container',
id : 'app-header-user',
ui : 'usp-plain-button',
layout : {
type : 'hbox',
align : 'center'
},
items : [
{
xtype : 'component',
html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.**
},
{
xtype : 'gear-menu'
}
]
},
}
];
this.callParent();
}
});

If we assume that you have correctly generated/defined store. You have Ext.define('store.User') somewhere. Otherwise you should use Ext.create('Ext.data.Store',{storeId: 'storeUser'});
So Ext.getStore('storeUser') is returning store object in your header view. You can't just use data.firstname on it. Because data property in the store is Ext.util.Collection.
If you want to get data from your store you should use:
Ext.getStore('storeUser').getAt(0).get('firstname')
Where 0 is the index of the record in your store.
Btw in your case I would recommend you to use Ext.Temaples you can check the official example here. Or here is quite OK example on the stackoverflow.

Couldnt read and set Json data with extjs4

I want to read json data in extjs here is my code below.
What i'm doing wrong ? I'm pretty new at Extjs.
I think i couldn't get the json value, or couldn't properly write it down on panel.
Thanks in advance.
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
var urlGetName = '${ctx}/main/list';
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ]
});
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad : false,
proxy : {
type : 'ajax',
actionMethods: {
read: 'GET'
},
reader : {
type : 'json',
root: 'data',
},
api : {
read: urlGetName
}
},listeners: {
load: function(store, records) {
dataa =store.getAt(0).get('data');
}
}
});
Ext.onReady(function() {
var firstGridStore = Ext.create('Ext.data.Store', {
model : 'DataObject',
data : dataa
});
var columns = [ {
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
} ];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});

You shouldn't use two stores to fill the one with the other. Delete the FirstGridStore and use the predefined remote store instead:
// Model
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ],
idProperty: 'name'
});
// Store
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad: true,
queryMode: local,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
reader: {
type : 'json',
root: 'data',
},
api: {
read: urlGetName
}
}
});
// Grid
var columns = [{
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : storeName, // defined store
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});

ExtJs : TypeError: this.layout.layout is not a function

In my J2EE web application there is a window with a form. It is showing when user clicks a button.
new Ext.Button({
text : 'Assign Vehicle',
handler : function() {
showVehicleAssignWin();
}
}
My showVehicleAssignWin() function is in TourPlan.js file. This is my TourPlan.js file.
function showVehicleAssignWin(){
assignVehicleWin.show(this);
}
My assignVehicleWin window is declaring in the DataEntryForms.js file.
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
// renderTo:document.body,
autoScroll : true,
// defaultType: 'displayfield',
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
/*
* layout : { type : 'vbox', align : 'center' }, defaults : { labelWidth :
* 200, padding : '10 10 10 25' },
*/
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Vehicle Registration Number',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Device ID',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Default Rep',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Driver',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Assistant',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 1',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 2',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
} ]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
// autoScroll: true,
// y: 120,
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
// modal: true,
plain : true,
// bodyStyle:'padding:8px;',
// buttonAlign:'center',
closeAction : 'hide',
// floating: true,
closable : true,
items : [ assignVehicleForm ]
});
I have to click the button two times to show the window. And also the window is showing up but it's empty. The FireBug console says
TypeError: this.layout.layout is not a function
I am using ExtJs 3.0.
Anyone has and idea what's going on here? Please help me to correct this error.
Thank You

i have prepared one sample code for you try this. i hope it will help you.
there is no need to use Ext.namespace();.
WindowLayout.js
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
autoScroll : true,
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
defaults : {
},
items : [{
fieldLabel : '00Vehicle Registration Number',
},{
fieldLabel : '00Device ID'
},{
fieldLabel : '00Default Rep'
}, {
fieldLabel : '00Driver'
}, {
fieldLabel : '00Assistant'
}, {
fieldLabel : '00Porter 1'
}, {
fieldLabel : '00Porter 2'
}, {
fieldLabel : '00Porter 3'
}],
buttons : [{
text : 'Delete',
handler : function() {
}
},{
text : 'View',
handler : function() {
}
},{
text : 'New',
handler : function() {
}
},{
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
}]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
plain : true,
closeAction : 'hide',
items : assignVehicleForm
});
Panel.js
Ext.onReady(function(){
var BorderEx = new Ext.Panel({
renderTo : Ext.getBody(),
width : 300,
height : 300,
style : "margin : 10px 10px 10px 10px;", /* MARGINS config used in boxlayout Or border layout only */
title : 'test for stackoverflow',
monitorResize : true,
items : [{
xtype : 'button',
width : 50,
height : 50,
text : 'Open Window',
handler : function() {
assignVehicleWin.show();
}
}]
});
});
NOTE: make sure this both files are registered in index.html

How to add itemtap

I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});

Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],

The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.