Issue regarding angular js and setting ng class dynamically - angularjs

i am new in angular. so i am tying to set class dynamically from my controller class. my program is working but right class is not getting attached. i am not being able to capture where is the problem in code. please see my code and js fiddle and tell me where is the problem for which right class is not getting attached with html element.
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-class="setColor(item.businessTime,item.name)" ng-repeat="item in products">{{item.name}} — {{item.price}} — {{clsName}} — {{diff}}</li>
</ul>
</div>
the problem list in setColor() function
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.dbTime=moment('12:05:05','HH:mm:ss');
$scope.diff='';
$scope.clsName='';
$scope.setColor = function(businessTime,name) {
//alert('businessTime '+businessTime);
//alert('dbtime '+$scope.dbTime);
var diff =$scope.dbTime.diff(businessTime, 'minutes')
//alert(diff);
$scope.diff=diff;
if(diff < 60)
{
alert(name+' clsRed '+diff);
$scope.clsName="clsRed";
return "clsRed";
}
else if(diff > 60 )
{
alert(name+' clsYello '+diff);
$scope.clsName="clsYello";
return "clsYello";
}
else if(diff > 200)
{
alert(name+' clsGreen '+diff);
$scope.clsName="clsGreen";
return "clsGreen";
}
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
'businessTime':moment('06:05:05','HH:mm:ss')
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':moment('04:15:22','HH:mm:ss')
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
'businessTime':moment('12:10:22','HH:mm:ss')
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
'businessTime':moment('06:25:22','HH:mm:ss')
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':moment('08:11:22','HH:mm:ss')
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
'businessTime':moment('19:41:22','HH:mm:ss')
}
]
})
js fiddle https://jsfiddle.net/tridip/czjo9f1m/1/
please help me to capture the problem. alert is showing setcolor function return right class name but different class is getting attached with html element.......why? thanks

Related

AngularJS setting data from controller function

I have a function in controller in which I am calling it from ng-class directive. My code is working but I am not getting right output. Something is wrong but I am not being able to capture it because I am new in AngularJS. So anyone please have a look at my code and tell me what mistake I made and if possible discuss with rectified code.
My code
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-class="setColor(item.businessTime,item.name)" ng-repeat="item in products">{{item.name}} — {{item.price}} — {{clsName}} — {{diff}}</li>
</ul>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff='';
$scope.clsName='';
$scope.setColor = function(businessTime,name) {
//alert('businessTime '+businessTime);
//alert('dbtime '+$scope.dbTime);
//var diff =$scope.dbTime.diff(businessTime, 'minutes')
//alert(diff);
var _diff=0;
var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(businessTime,"DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);
//alert(d.asMinutes());
_diff=Math.round(d.asMinutes());
if(_diff.between(-2000, -6000))
{
//alert(name+' clsRed '+_diff);
$scope.diff=Math.round(d.asMinutes());
$scope.clsName="clsRed";
return "clsRed";
}
else if(_diff.between(-6001, -8000))
{
//alert(name+' clsGreen '+diff);
$scope.diff=Math.round(d.asMinutes());
$scope.clsName="clsYello";
return "clsYello";
}
else if(_diff.between(1000, 2000))
{
//alert(name+' clsYello '+_diff);
$scope.diff=Math.round(d.asMinutes());
$scope.clsName="clsGreen";
return "clsGreen";
}
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
'businessTime':'05/09/2013 15:00:00'
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'04/09/2013 14:20:00'
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
'businessTime':'06/09/2013 18:12:10'
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
'businessTime':'07/09/2013 19:22:00'
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'01/09/2013 09:00:00'
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
'businessTime':'10/09/2013 07:00:00'
}
]
})
Number.prototype.between = function(a, b) {
var min = Math.min.apply(Math, [a, b]),
max = Math.max.apply(Math, [a, b]);
return this > min && this < max;
};
css
.clsRed {
font-weight: bold;
color: red;
}
.clsYello {
font-weight: bold;
color: yellow;
}
.clsGreen {
font-weight: bold;
color: green;
}
within if else logic i am setting class name $scope.clsName="clsYello"; but in output i have notice some time wrong class name in showing in html.
here is screen shot
now see the first data where class name is showing clsGreen but in output clsRed is applied. right output would be clsRed and also clsRed should be applied. clsRed has applied but clsGreen is showing as class name in output which is not right.
so please guide me where i made the mistake. please guide me with rectified code.
js fiddle https://jsfiddle.net/tridip/czjo9f1m/8/
thanks
see this. if you use $scope.diff as array probably you find out what is your problem.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff=[];
$scope.clsName=[];
$scope.setColor = function(businessTime,name) {
var _diff=0;
var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(businessTime,"DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);
_diff=Math.round(d.asMinutes());
if(_diff.between(-2000, -6000))
{
$scope.diff.push(Math.round(d.asMinutes()));
$scope.clsName.push("clsRed");
console.log($scope.diff);
return "clsRed";
}
else if(_diff.between(-6001, -8000))
{
$scope.diff.push(Math.round(d.asMinutes()));
$scope.clsName.push("clsYello");
console.log($scope.diff);
return "clsYello";
}
else if(_diff.between(1000, 2000))
{
$scope.diff.push(Math.round(d.asMinutes()));
$scope.clsName.push("clsGreen");
console.log($scope.diff);
return "clsGreen";
}
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
'businessTime':'05/09/2013 15:00:00'
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'04/09/2013 14:20:00'
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
'businessTime':'06/09/2013 18:12:10'
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
'businessTime':'07/09/2013 19:22:00'
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'01/09/2013 09:00:00'
}
];
})
Number.prototype.between = function(a, b) {
var min = Math.min.apply(Math, [a, b]),
max = Math.max.apply(Math, [a, b]);
return this > min && this < max;
};
.clsRed {
font-weight: bold;
color: red;
}
.clsYello {
font-weight: bold;
color: yellow;
}
.clsGreen {
font-weight: bold;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-repeat="item in products track by $index"><span ng-class="setColor(item.businessTime,item.name)">{{$index}} — {{item.price}} — {{clsName[$index]}} — {{diff[$index]}}</span></li>
</ul>
</div>
i think that this is better solution.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.dbTime='02/09/2013 15:00:00';
$scope.diff=[];
$scope.clsName=[];
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
'businessTime':'05/09/2013 15:00:00'
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'04/09/2013 14:20:00'
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
'businessTime':'06/09/2013 18:12:10'
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
'businessTime':'07/09/2013 19:22:00'
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':'01/09/2013 09:00:00'
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
'businessTime':'10/09/2013 07:00:00'
}
];
angular.forEach( $scope.products,function(product,i){
var _diff=0;
var ms = moment($scope.dbTime,"DD/MM/YYYY HH:mm:ss").diff(moment(product.businessTime,"DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);
_diff=Math.round(d.asMinutes());
$scope.products[i].diff = _diff;
});
console.log($scope.products);
})
.clsRed {
font-weight: bold;
color: red;
}
.clsYello {
font-weight: bold;
color: yellow;
}
.clsGreen {
font-weight: bold;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-repeat="item in products track by $index">
<span ng-class="{'clsYello':-6000>item.diff,'clsRed':-2000>item.diff,'clsGreen':item.diff > 1000}">{{$index}} — {{item.price}} — {{clsName[$index]}} — {{item.diff}}</span></li>
</ul>
</div>

How to put multiple condition in ng-class [duplicate]

This question already has answers here:
Adding multiple class using ng-class
(12 answers)
Closed 6 years ago.
suppose i am showing product information. i want if price less than 50 then item color should be red. if price more than 50 then item color should be yellow and if price more than (50+(50*60/100)) then item color should be green. now tell me how could i achieve it best way. guide me with best approach to complete it.
this way i tried but i came to know there will be more iteration due to dirty check when work with ng-repeat. see my code and tell me how could i put multiple condition in ng-class to set class dynamically.
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-class="setColor(item.price)" ng-repeat="item in products">{{item.name}} — {{item.price}}</li>
</ul>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.setColor = function(price) {
alert(price);
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
}
]
})
tell me without calling function from ng-class how could i place multiple if else condition in ng-class?
if price > 50
return "css-class-yello"
else if price < 50
return "css-class-red"
else if price > (50+(50*60/100))
return "css-class-green"
if possible please guide me with code. thanks
try like this.
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.products = [{
'name': 'Xbox',
'clearance': true,
'price': 30.99,
}, {
'name': 'Xbox 360',
'clearance': false,
'salesStatus': 'old',
'price': 99.99,
}, {
'name': 'Xbox One',
'salesStatus': 'new',
'price': 50,
}, {
'name': 'PS2',
'clearance': true,
'price': 79.99,
}, {
'name': 'PS3',
'salesStatus': 'old',
'price': 99.99,
}, {
'name': 'PS4',
'salesStatus': 'new',
'price': 20.99,
}];
});
.css-class-yellow{
background-color: yellow;
}
.css-class-red{
background-color: red;
}
.css-class-green{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<ul class="nav nav-pills" ng-init="catVal = 1">
<li ng-repeat="item in products" ng-class="{'css-class-yellow' : item.price > 50,'css-class-red' : item.price <50, 'css-class-green' : item.price > 50+50*60/100}">
{{item.name}}
</li>
</ul>
</div>
You could set ng-class to call a function in your controller and pass the object.
Example: https://jsfiddle.net/5hgLshhz/
<ul>
<li ng-repeat="p in ctrl.products" ng-class="ctrl.setClass(p)">{{p.name}}</li>
</ul>
function Controller() {
var vm = this;
vm.products = [{
'name': 'Xbox',
'clearance': true,
'price': 30.99,
}, {
'name': 'Xbox 360',
'clearance': false,
'salesStatus': 'old',
'price': 99.99,
}, {
'name': 'Xbox One',
'salesStatus': 'new',
'price': 50,
}, {
'name': 'PS2',
'clearance': true,
'price': 79.99,
}, {
'name': 'PS3',
'salesStatus': 'old',
'price': 99.99,
}, {
'name': 'PS4',
'salesStatus': 'new',
'price': 20.99,
}];
vm.setClass = setClass;
function setClass(p) {
if (p.price > 50) {
return 'css-class-yellow';
}
if (p.price < 50) {
return 'css-class-red';
}
if (p.price > (50 + (50 * 60 / 100))) {
return 'css-class-green';
}
}
}
There are several different ways to use ng-classthe way I most commonly use this directive is by setting your css class to a boolean $scope variable... something like:
HTML:
ng-class="{your-css-class:$scope.myVariable}"
Angular controller:
//to add class
$scope.myVariable = true
//to remove class
$scope.myVariable = false
To use multiple classes simply seperate them by commas something like:
ng-class="{your-css-class:$scope.myVariable, my-other-class:$scope.myOtherVariable}"
fiddle here

Displaying Nested Json as individual columns on the UI Grid

My rest call gives me an array of nested objects which differs for every outer object...
Example:
$scope.data = [
{
id :5,
nested : [
{name : 'SHOE', value : 'ABC'},
{name : 'TIE', value : 'DEF'}
]
},
{
id :6,
nested : [
{name : 'SHIRT', value : 'XYZ'},
{name : 'TIE', value : 'GHI'}
]
},
{
id :8,
nested : [
{name : 'CAP', value : 'FD1'},
{name : 'fixed', value : 'Domain1'}
]
}
];
But I want it to be displayed on the grid columns as
ID | SHOE| TIE| SHIRT| CAP | fixed
how should I achieve this?
There are 2 solutions using cellTemplate and calling a function from 'field' I am able to achieve this but there are just to many iterations and I dont want that...
Also I read about Expandalable Grids, which again does not suficy this..
Plz reply... I'm not sure if this feature exists or not...
This is how I have done but i need a better solution...
`
$scope.columnDefsService = ['fixed', 'SHOE', 'CAP', 'TIE', 'SHIRT', 'JEANS'];
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name:'id', width : '50' }
],
data : $scope.data
};
_.each($scope.columnDefsService, function(col, index){
var temp = $scope.columnDefsService[index];
$scope.gridOptions.columnDefs.push(
{name : $scope.columnDefsService[index], field: 'nested[0]', cellTemplate: '<div>{{grid.appScope.fun(col,row.entity.nested)}}<div>'}
)
});
$scope.fun = function(col, attributes){
var temp = '';
_.each(attributes, function(attribute){
if(attribute.name === col.name){
console.log('true');
temp = attribute.value
}
})
return temp;
};
}]);
`
You can use cellTemplate property in $scope.gridOptions .For this you can refer to the example below.
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name:'id', width : '50', cellTemplate : '<button ng-repeat="record in row.entity.nested ">{{record.name }}</button>' }
]};

How to display name/value pairs into a Ext.grid.Panel from a Ext.data.Store

Here is the store :
Ext.define( 'LFinanceCRM.store.Prospect', {
extend : 'Ext.data.Store',
buffered : false,
autoLoad : true,
remoteFilter : true,
storeId : 'prospect-store',
proxy : {
type : 'ajax',
url : 'services/getProspect.php',
filterParam : undefined,
limitParam : undefined,
startParam : undefined,
pageParam : undefined,
idParam : 'id',
reader : {
type : 'json',
root : 'prospect'
}
},
fields : [
{ name : 'id' },
{ name : 'value' }
],
constructor : function(){
this.callParent( arguments );
console.log( 'new ' + this.self.getName());
}
});
Here is the PHP code:
<?php
include_once 'db.php';
header( "Content-type: application/json; charset=utf-8" );
$id = #mysql_real_escape_string($_GET['id']);
$link = db_open();
$query = "SELECT name, value FROM Pairs WHERE id = '$id'";
$result = #mysql_query( $query, $link );
$pairs = array();
if( $result ) {
while( $row = mysql_fetch_assoc( $result )) {
$item = Array();
$item['id' ] = $row['name' ];
$item['value'] = $row['value'];
$pairs[] = $item;
}
}
$response = array( 'prospect' => $pairs );
print json_encode( $response );
#mysql_free_result( $result );
#mysql_close( $link );
?>
Here is the JSON received from PHP:
{prospect:[
{id:'aaa',value:'vvvv'},
{id:'bbb',value:'vvvv'},
...
{id:'yyy',value:'vvvv'},
{id:'zzz',value:'vvvv'},
}]
Here is the view:
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
requires :[],
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : Ext.data.StoreManager.lookup( 'prospect-store' ),
columns : [{
text : 'Nom',
dataIndex : 'name',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
I use the MVC pattern supported by Sencha app build tool, here is the controller:
Ext.define( 'LFinanceCRM.controller.Main', {
extend : 'Ext.app.Controller',
id : 'theController',
onNonLuesSelectionChanged : function( panel, selected, eOpts ) {
console.log('onNonLuesSelectionChanged: ' + selected[0].data.id );
this.getStore('Prospect').load({
id : selected[0].data.id,
callback : function( records, operation, success ) {
var pairs = [];
for( var i = 0; i < records.length; ++i ) {
pairs.push( records[i].data );
}
Ext.ComponentQuery.query('client-view')[0].getForm().setValues( pairs );
Ext.ComponentQuery.query('immo-view' )[0].getForm().setValues( pairs );
}
});
},
onSavePairs : function() {
console.log('onSavePairs');
},
...
onMail : function() {
console.log('onMail');
},
...
stores : ['Prospect'],
constructor : function(){
this.callParent( arguments );
console.log( 'new ' + this.self.getName());
this.control({
'#ProspectsTableNonLues' : { selectionchange : this.onNonLuesSelectionChanged },
...
'#savePairsButton' : { click : this.onSavePairs },
...
'#mail' : { click : this.onMail },
});
}
});
Nothing is displayed yet!
My question is : how can I transform the data from store to feed the view with them?
Your LFinanceCRM.view.RawDataView config is not properly defined.
You should create an instance of Store to assign to the grid panel -
store : Ext.data.StoreManager.lookup( 'prospect-store' ),
should be changed to
store : Ext.create("LFinanceCRM.store.Prospect"),
Also in columns config, dataIndex should be "id" for the first column instead of "name"
{
text : 'Nom',
dataIndex : 'name',
sortable : false,
width : 200
}
should be changed to
{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : 200
}
Replace your LFinanceCRM.view.RawDataView code with this -
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : Ext.create("LFinanceCRM.store.Prospect"),
columns : [{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : 200
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : 200
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
To avoid double request to the server and some other reasons, I prefer share the instance of the store betweens several views.
As pointed out by Prasad K, a mistake between name and id must be corrected.
As pointed in the documentation of Sencha Extjs4.2.2, when a store is instantiated by a controller, its id is the name of its class, even an id is set (bug?).
So the code becomes:
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : 'Prospect',
columns : [{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
And it works!

Extjs 4 updateRecord error

(Sorry in advance if the post is to long, I just add all the code that is involved in the problem, then I think it could be easier to get an answer)
Hello, I'm encountering a problem when I try to update a store in extjs 4.
To back up a little I'm developing a general grid where you can send the columns you need and also a the fields in a window to add new rows to the grid, then this is the general grid:
Ext.define('masterDataGridControls', {
extend : 'Ext.grid.Panel',
id : 'panelWin',
windowItems : null,
addWin : null,
initComponent : function() {
var me = this;
Ext.applyIf(me, {
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
items : [{
xtype : 'button',
id : 'btn_delete',
iconCls : 'deleteIcon',
tooltip : 'Delete row or group',
handler : function() {
var selection = me.getView()
.getSelectionModel()
.getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}, {
xtype : 'button',
id : 'btn_add',
iconCls : 'addIcon',
tooltip : 'Add row or group',
handler : me.addToList
}]
}]
});
me.callParent(arguments);
},
getAddWindow : function() {
if (!this.addWin) {
this.addWin = new windowPop({
formItems : this.windowItems,
idParent : this.config.id,
record : this.store.model.prototype
});
}
return this.addWin;
},
addToList : function() {
var addWindow = this.findParentByType().findParentByType()
.getAddWindow();;
addWindow.show();
}
});
And I have the class windowPop that is the one who receives the fields, display them and save the data:
Ext.define("windowPop", {
extend : "Ext.window.Window",
formPanel : null,
formItems : null,
record : null,
idParent : null,
initComponent : function() {
var me = this;
me.formPanel = new Ext.form.Panel({
items : this.formItems,
layout: 'anchor'
});
Ext.applyIf(me, {
resizable : false,
closable : false,
width : 300,
minWidth : 300,
minHeight : 200,
y : 150,
layout : 'fit',
plain : true,
modal : true,
items : [me.formPanel],
buttons : [{
text : "i_Save",
handler : function() {
console.info(me.record);
me.formPanel.getForm().updateRecord(me.record);
Ext.getCmp(me.idParent).fireEvent("winSave",me.record);
me.formPanel.getForm().reset();
me.hide();
}
}, {
text : 'i_Cancel',
handler : function() {
me.formPanel.getForm().reset();
me.hide();
}
}]
});
me.callParent(arguments);
}
});
And I have my specific grid, where I define a data.model and for now I'm using a fixed store, but later on will be replace by the one I get from the server:
Ext.define('userKeys', {
extend : 'Ext.data.Model',
fields : [{
name : 'text',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'group',
type : 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'userKeys',
data : [{
text : "que mamera",
description : "asdfasdf",
group : 'homework'
}, {
text : "book report",
description : 'hola',
group : 'homework'
}, {
text : "alegebra",
description : "haha",
group : 'homework'
}, {
text : "buy lottery tickets",
description : "kajsdf",
group : 'homework'
}]
});
Ext.define('ConfigInterfacesUserKeys', {
extend : 'masterDataGridControls',
initComponent : function() {
var me = this;
me.columns = [{
id : 'cl_input',
header : 'i_Text',
dataIndex : 'text',
width : 220
}, {
header : 'i_Description',
dataIndex : 'description',
width : 130
}, {
header : 'i_group',
dataIndex : 'group',
width : 130
}];
me.windowItems = [{
xtype : 'textfield',
id : 'txt_sendTime',
fieldLabel : 'text',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120,
name : 'text'
}, {
xtype : 'textfield',
id : 'txt_waitTime',
fieldLabel : 'description',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120,
name : 'description'
}, {
xtype : 'textfield',
id : 'txt_group',
fieldLabel : 'group',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120,
name : 'group'
}];
me.store = store;
me.callParent(arguments);
}
})
The Problem
When I try to save the fields as you see in the windowPop class Im doing this:
me.formPanel.getForm().updateRecord(me.record);
But I get the next error:
this[this.persistenceProperty] is undefined
I tracked down the error and I find that all start when in the function updateRecord try to set the object to the store:
updateRecord: function(record) {
var fields = record.fields,
values = this.getFieldValues(),
name,
obj = {};
fields.each(function(f) {
name = f.name;
if (name in values) {
obj[name] = values[name];
}
});
record.beginEdit();
**record.set(obj);**
record.endEdit();
return this;
}
I don't know if it is something wrong when I send the model to the window from the general grid, I sent it this way:
record : this.store.model.prototype
Then I'm not sure if its because the model I'm sending its not well forme.
I've been searching the internet but I can't find a proper answer then it will be really helpful if you can guide me in the right way.
Thanks
I don't know if it is something wrong when I send the model to the
window from the general grid
I believe it is. You are sending not an empty instance (which should be sent) but a class' prototype. Try to send:
record : new this.store.model()

Resources