ExtJS Tabpanel and JSON data not loading? - javascript

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,

Related

Sencha touch Selectfield picker not showing correct selection

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! :)

EXTJS JsOnStore bit but display blank value

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'}
]
});

choosing only specific columns with ng-grid

I am trying to lean ng-grid and am having trouble with selecting only specific columns from my data to display. Below is my code:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, sex: "Male"},
{name: "Tiancum", age: 43, sex: "Female"},
{name: "Jacob", age: 27, sex: "Male"},
{name: "Nephi", age: 29, sex: "Male"},
{name: "Enos", age: 34, sex: "Female"}];
$scope.gridOptions = { data: myData,
columnDefs: [{ field: 'name', displayName: 'Name', width: 90},
{ field: 'sex', displayName: 'Sex', width: 90}
]};
});
Basically, I'd like to be able to display only columns "name" and "sex" in myData. Any help here? I've looked for answers to this question on SO and elsewhere online but haven't found anything. Apologies if this is a dupe.
Here's the Plunker.
You have to put myData inside quotes
$scope.gridOptions = { data: 'myData', // <<<<<
columnDefs:
[{ field: 'name', displayName: 'Name', width: 90 },
{ field: 'sex', displayName: 'Sex', width: 90 }
]};

Extend from custom model class in ExtJS 4

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'}
]);
}
});

How to sort ArrayStore?

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(...);

Categories