How to extend from custom model in extjs.
Is there any method which can directly club the fields of User and BusinessUser fields when I'll refer the fields from BusinessUser class in example below.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
});
Ext.define('BusinessUser', {
extend: 'User',
fields: [
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
],
});
You don't need to join the fields manually because it's done automatically. Check the outputs in the code bellow based on your question:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
});
Ext.define('BusinessUser', {
extend: 'User',
fields: [
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
],
});
// instantiating a User object
var u = Ext.create('BusinessUser', {
name: 'John Doe',
age: 30,
phone: '555-5555'
});
// instantiating a BusinessUser object
var bu = Ext.create('BusinessUser', {
name: 'Jane Doe',
age: 40,
phone: '555-5556',
businessType: 'analyst',
company: 'ACME'
});
console.log(Ext.getClassName(bu)); // "BusinessUser"
console.log(Ext.getClassName(u)); // "User"
console.log(u instanceof User); // true
console.log(bu instanceof User); // true
console.log(u instanceof BusinessUser); // false
console.log(bu instanceof BusinessUser); // true
console.log(u instanceof Ext.data.Model); // true
console.log(bu instanceof Ext.data.Model); // true
console.log(u instanceof Ext.data.Store); // false, just to check if it's not returning true for anything
console.log(bu instanceof Ext.data.Store); // false
console.log("name" in u.data); // true
console.log("name" in bu.data); // true
console.log("company" in u.data); // false
console.log("company" in bu.data); // true
Although it should work automatically, use the below if you are having troubles for some reason.
Use the constructor to join the fields:
Ext.define('BusinessUser', {
extend : 'User',
constructor : function(){
this.callParent(arguments);
this.fields.push([
{name: 'businessType', type: 'string'},
{name: 'company', type: 'string'}
]);
}
});
Related
Store of the selectfield contains same word with different case like Ed & ed.When we select ed,In the picker it is showing Ed.
Code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField:'firstName',
valueField:'firstName',
store:Ext.create("Ext.data.Store", {
fields: [
{name: 'firstName', type: 'string'},
],
data : [
{firstName: "Ed"},
{firstName: "ed"},
{firstName: "Tommy"},
{firstName: "Aaron"},
{firstName: "Jamie"}
]
})
}
]
}
]
});
Fiddle for the problem
In Sencha, the selectfield is somethings whose value doesn't distinguish between the caps and small letter. So, it has provided valuefield. If you create your store like this below, you will get the expected result:
store: Ext.create("Ext.data.Store", {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'value',
type: 'string'
}],
data: [{
firstName: "Ed",
value: 'edCaps'
}, {
firstName: "ed",
value: 'edSmall'
}, {
firstName: "Tommy",
value: 'tommy'
}, {
firstName: "Aaron",
value: 'aaron'
}, {
firstName: "Jamie",
value: 'jamie'
}]
})
Here is fiddle also. Happy coding! :)
Recently I try to get data from json file with using sencha touch but its showing 0 result, Please refer below coding and tell me about my mistake,
Thanks,
app.js
Ext.application({
name: 'TP',
views: [
'Main'
],
models: [
'User'
],
stores: [
'Users'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
var user = Ext.create('TP.model.User', {
name: 'James Henry',
age: 24,
phone: '555-555-5555',
username: 'Admin'
});
Ext.getStore('Users').on('load', this.onStoreLoad, this);
console.log(Ext.getStore('Users'));
},
onStoreLoad: function(self, records, success, operation){
console.log(self);
}
});
Model :: User.js
Ext.define('TP.model.User',{
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
{type: 'format', field: 'username', matcher: /^[A-Za-z0-9 _]*$/ }
],
},
ageString: function(){
var age = this.get('age');
if(age > 1) {
return age + " yesrs old";
}else{
return age = " Yes old";
}
}
});
Store :: Users.js
Ext.define('TP.store.Users', {
extend: 'Ext.data.Store',
config: {
model: 'TP.model.User',
autoload: true,
proxy: {
type: 'ajax',
url: 'http://localhost/sencha/SenchaStarter/data/users.json',
reader: {
rootProperty: 'users',
type: 'json'
}
}
}
});
JSON file users.json
{
"users": [
{
"name": "Mike Henderson",
"age": 24,
"phone": "555-555-555",
"gender": "Male",
"username": "mhenderson",
"alive": true
},
{
"name": "Sally Michael",
"age": 34,
"phone": "555-555-555",
"gender": "Female",
"username": "sallym",
"alive": true
},
{
"name": "Rory Muldoon",
"age": 19,
"phone": "555-555-555",
"gender": "Male",
"username": "greatscott",
"alive": true
}
]
}
The store isn't loading because you haven't loaded it yet. The reason is a typo as you wrote this config option in your store:
autoload
when it needs to be:
autoLoad
The proxy of your store is set to ajax. It won't save the records. I believe that you will only have access to the records in the onStoreLoad in app.js.
You could perhaps(now this is just a theory) set the ajax proxy in your model(this I am sure that you can do and is recommended by sencha because you can then override this proxy with the store proxy when needed http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/) then save the records in the store, because i believe that a store proxy type by default is localstorage.
Good luck :)
This is an Picture Show PowerOff Return value with \u0001 , but unfortunately when i store in JsOnStore are failure and i m trying to alert('PowerOff') are blank, why?
this is my JsOnStore Model Data
Ext.define('GoogleMarkerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'ID', type: 'int'},
{name: 'Locating', type: 'int'},
{name: 'MainPower', type: 'int'},
{name: 'Acc', type: 'int'},
{name: 'PowerOff', type: 'int'}, // i have tried int,string,bit
{name: 'Alarm', type: 'int'},
{name: 'Speed', type: 'int'},
{name: 'Direction', type: 'int'},
{name: 'Latitude', type: 'float'},
{name: 'Longitude', type: 'float'},
{name: 'DateTime', type: 'datetime'},
{name: 'MainID', type: 'int'},
{name: 'IOState', type: 'int'},
{name: 'OilState', type: 'int'},
{name: 'PicUploadedDateTime', type: 'datetime'},
{name: 'PicData', type: 'str'}
]
});
I have a object:
store: Ext.create('Ext.data.ArrayStore',{
sortInfo: { field: "uniq_users", direction: "DESC" },
fields: [
{name: 'Country', type: 'string'},
{name: 'uniq_users', type:'int'}],
data: [{Country: 'Ed', users: 'Spencer'}]
})
store.loadData(...)
Why default sort don't work for field ?
The sortInfo property is available for ExtJS 3.x and not for the latest version. With release of version 4, the sorting is implemented through the mixin Ext.util.Sortable. You should be using the property sorters to define your sorting parameters..
Here is what you should be doing:
store: Ext.create('Ext.data.ArrayStore',{
sorters: [
{property : 'uniq_users',direction: 'DESC'}
],
fields: [
{name: 'Country', type: 'string'},
{name: 'uniq_users', type:'int'}
],
data: [{Country: 'Ed', users: 'Spencer'}]
});
store.loadData(...);
I am using a tabpanel with two panels, where I am retrieving data through JSON. Retrieving data in the first tabpanel seems to work great, however, I can't parse the data retrieved from the JSON in the second tabpanel. Any ideas?
var registrationformPanel = new Ext.form.FormPanel({
frame:true,
border:true,
labelWidth: 125,
url:'content/registercompany/registercompany.php?mode=createRegistercompany',
sortInfo:{field: 'company_id', direction: "ASC"},
reader: new Ext.data.JsonReader({
root: 'results'
}, [
{name: 'company_id', sortType : 'int'},
{name: 'company_name'},
{name: 'orgno'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'address1'},
{name: 'postalcode'},
{name: 'postalarea'},
{name: 'phone1'},
{name: 'mobile'},
{name: 'fax1'},
{name: 'email'},
{name: 'www'},
{name: 'bankaccount'},
{name: 'member_password'},
{name: 'member_confirm_password'},
{name: 'butikknummer'}, {name: 'bransje'},
{name: 'kommentar'},
{name: 'apningstider_hverdag'},
{name: 'stengetider_hverdag'},
{name: 'apningstider_helg'},
{name: 'stengetider_helg'},
{name: 'butikk_navn'},
{name: 'butikk_addresse'},
{name: 'butikk_telefon'},
{name: 'butikk_poststed'},
{name: 'butikk_postnummer'}
]),
items: [{
// {
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:405,
// defaults:{bodyStyle:'padding:15px'},
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Firmainformasjon',
//layout:'form',
//layout:'column',
layout:'column',
defaults: {width: 200},
//defaultType: 'textfield',
items: [{
columnWidth:.50,
layout: 'form',
items: [
company_id,
butikk_navn,
company_name,
orgno,
firstname,
lastname,
address1,
postalcode,
postalarea,
butikknummer,
kommentar
// apningstider_hverdag,
// stengetid_hverdag
]
},{
columnWidth:.50,
layout: 'form',
items: [
phone1,
mobile,
fax1,
email,
www,
bankaccount,
member_password,
member_confirm_password
//bransje
]
}]
},{
title:'Butikkinformasjon',
//layout:'form',
//layout:'column',
layout:'column',
defaults: {width: 200},
//defaultType: 'textfield',
items: [{
columnWidth:.50,
layout: 'form',
items: [
//butikk_navn,
butikk_addresse,
butikk_poststed,
apningstider_hverdag,
stengetider_hverdag
]
},{
columnWidth:.50,
layout: 'form',
items: [
butikk_telefon,
butikk_postnummer,
apningstider_helg,
stengetider_helg,
bransje
]
}]
}]
And:
if(id!="" && id!="[object Object]" && id!=undefined)
{
registrationformPanel.form.load({url:'content/registercompany/registercompany.php?mode=editRegistercompany&id='+id,
waitMsg:'Loading'});
}
I managed to find out the answer to my own question. The problem was solved by adding this:
deferredRender: false,