We Keep Coding

appendgrid data not populated as response, instead empty rows coming in the grid

Sometimes my appendgrid plugin not populating proper data instead same no empty rows are inserted as response array length.
var inputStr = '{"ok":true,"data":{"IssueDetails":[{"Name":"test121","Description":"test131666"}],"StatusDetails":{"L1_Process_ID":"1.0.0","WeeklyStatusText":"test blue1","NextWeekActivity":"p test"},"accessDetails":{"edit":true,"delete":false,"role":""}},"message":"Data retrieved successfully"}';
var responseData = JSON.parse(inputStr);
$('#tblStatusGrid').appendGrid({
caption: 'Key Issues, Key Decisions, Key OCM Impacts (Including FTE +/-), Business Improvements',
columns: [{
name: 'Name',
display: 'Name',
type: 'text',
displayCss: {
width: '100px',
height: 'auto'
},
ctrlAttr: {
maxlength: 50
}
}, {
name: 'Description',
display: 'Description',
type: 'textarea',
displayCss: {
width: '98%',
height: 'auto'
},
}],
hideButtons: {
removeLast: true
},
//maxBodyHeight: 300,
// maintainScroll: true
});
$('#tblStatusGrid').appendGrid('load', responseData.data.IssueDetails);
Here in the grid I should get a row of data as in response, but I am getting an empty instead. So please suggest a solution or any reason why so.
response : '{"ok":true,"data":{"IssueDetails":[{"Name":"PTP","Description":"DESC build"},{"Name":"PTP2","Description":"Desc Build2"},{"Name":"PTP","Description":"Desc Build33"}],"accessDetails":{"edit":true,"delete":false,"role":""}},"message":"Data retrieved successfully"}'
grid after load

Look appendgrid docs here
add dataLoaded method you your code and watch with console.
dataLoaded: function (caller, records) {
onsole.log(record.length);
}

I found the answer for my question.
If the we are using multiple appendgrids in my case I had multiple tabs loading the data to appendgrids so there might be a conflict of elements. So better check for the conflicts or empty the data for the other appendgrid which is not shown and then load the new data.

Creating ng-grids dynamically

I have a problem creating ng-grids dynamically:
The next function loops through each element of $scope.dataSparqlResponses (each element is an array of data) and put the value of the iteration in $scope.dataSparqlAux. And $scope.dataSparqlAux is the variable used in the grids (data input). The problem is that in each iteration this variable ($scope.dataSparqlAux) is reassigned, so in the template I can only see the last grid with data.
**controller.js**
$scope.crearGrids = function() {
angular.forEach($scope.dataSparqlResponses, function(elem) {
$scope.dataSparqlAux = elem.data;
$scope.dataGrids.push({grid: {
data: 'dataSparqlAux',
enablePinning: false,
showFooter: true,
selectedItems: [],
i18n: 'es',
showSelectionCheckbox: true,
afterSelectionChange: function() {
console.log(this);
},
columnDefs: [{field: elem.nombre + '.value', displayName: elem.nombre, cellTemplate: templateWithTooltip}]
}});
console.log($scope.dataGrids);
});
};
**template.html**
<div data-get-width data-num-elementos="{{dataGrids.length}}" >
<div ng-repeat="dataGrid in dataGrids">
<div class="tabla_det" ng-grid="dataGrid.grid"></div>
</div>
</div>
is possible to do something like this?
$scope.dataGrids.push({grid: {
**data: 'dataSparqlResponses[cont]',**
enablePinning: false,
showFooter: true,
selectedItems: [],
i18n: 'es',
showSelectionCheckbox: true,
afterSelectionChange: function() {
console.log(this);
},
columnDefs: [{field: elem.nombre + '.value', displayName: elem.nombre, cellTemplate: templateWithTooltip}]
}});
console.log($scope.dataGrids);
How can I fix this to create grids and display information dynamically?
Regards and thanks for your time.
EDIT: here a plunker with the problem http://plnkr.co/edit/zYtuMW4TKW053YoDY0kg?p=preview

I've shared an answer on github about your issue.
Basically, data is referencing a variable, you're not storing it.
What you can do is reference a new variable on every loop, as shown in the jsbin.
Declare an index :
var index = 0;
You declare your string with the index of the sub-document :
var dirtyConcat = 'dataSparqlResponses['+index+'].data';
Don't forget to increment the index :
++index;
Then, you reference it.
data: dirtyConcat,

get checkbox value without using Ext.getCmp

I am trying to get value of this checkbox
Ext.define('myRoot.myExtApp.myForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
scope: this,
constructor: function() {
this.callParent(arguments);
this.myFieldSet = Ext.create('Ext.form.FieldSet', {
scope: this,
columnWidth: 0.5,
collapsible: false,
defaultType: 'textfield',
layout: {
type: 'hbox', align: 'stretch'
}
});
this.mySecondForm = Ext.create('myRoot.myExtApp.myForm2', {
scope: this,
listener: this,
margin: '1 3 0 0'
});
this.myCheckBox = Ext.create('Ext.form.Checkbox', {
scope: this,
//id: 'myCheckBox',
boxLabel: 'Active',
name: 'Active',
checked: true,
horizontal: true
});
this.myFieldSet.add(this.mySecondForm);
this.myFieldSet.add(this.myCheckBox);
this.add(this.myFieldSet);
}
});
As you can see I have another form
Ext.define('myRoot.myExtApp.myForm2', {
where I have a handler, that should get the value of the checkbox from "myForm"
How can I get the value of my checkbox from Form2 without using Ext.getCmp? I know I can get the value of the checkbox if I do
Ext.getCmp('myCheckBox').getValue();
but using
this.myCheckBox.getValue();
gives me undefined error.
UPDATE - with Wared suggestion I tried this inside myForm2
this.temp=Ext.create('myRoot.myExtApp.myForm'), {});
var tempV = this.temp.myCheckBox.getValue();
I was able to get the value but I get the same true value even if I uncheck the box

I assume you worry about performance loss due to excessive use of component queries. A nice trick to minimize component queries could be to define a new method inside a closure in order to cache the result of the first getCmp call. Wrapping the definition of the method inside a closure allows to avoid using global scope or a useless class property.
getMyCmp: function (cmp) {
// "cmp" does not exist outside this function
return function () {
return cmp = cmp || Ext.getCmp('#myCmp');
};
}()

One solution could be :
myRoot.myExtApp.myForm.myCheckBox.getValue();
Beware, wrong answer. See comments below for a valid solution.

How to call this onclick javascript function in my architecture

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
In my one class of Dashboardgrid i have two functions are :
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
when the click event of linkrendrer function is called it gives error
this.resellerwindow is not a function
where and how should i put resellerwindow function ?
My ResellerDashBoard Class
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount',
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
})
,columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered',
renderer : this.linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup'
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback'
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested'
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed'
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered'
}
]
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 350
,width : 1060
,title : 'Reseller Dashboard'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* It is the renderer of the links of cell
* #param data value of cell
* #param record object of data has all the data of store and record.id is unique
**/
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
,onRender:function() {
// this.store.load();
Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardGrid', Application.DashBoardGrid);

Your scope is messed up, when the function in your <a> tag is called this does not point to your object where you defined the function but to your <a>-dom node.
It's pretty hard to call member functions from within a html fragment like the fragment returned by a grid renderer. I suggest you take a look at Ext.grid.ActionColumn to solve this problem. When you look at the code in this column type you should be able to write your own column type that renders a link instead of an icon like the ActionColumn.
Another option is using my Ext.ux.grid.ButtonColumn which doesn't render links but buttons in your grid.
more info on scope in ExtJS (and js in general): http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about

this.resellerwindow is not a function
because 'this', in the onclick function is in fact a reference to the 'a' dom element;
In order to access the 'resellerwindow' function from the onclick handler, you need to make the function accessible from the global scope, where your handler is executed:
var globalObj =
{
linkRenderer : function (data, cell, record, rowIndex, columnIndex, store)
{
if (data != null)
return ''+ data +'';
return data;
},
resellerwindow : function (cityname)
{
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
}
so use the globalObj.resellerwindow(......);

The problem is that this does not point to the class itself. Should you need to render the a element as a string instead of JavaScript object you will need to call a global function in which to call the resellerwindow function (after obtaining correct reference). However, I believe a much more efficient way would be to abandon the string and use JavaScript object instead. Then you can do something like the following:
var a = document.createElement("a");
a.onclick = this.resselerwindow;
If you use jQuery something like the following can be used:
return $("<a />").click(this.resselerwindow)[0];

instead of building and passing direct html, try these.
Create Anchor object
{ tag: 'a',
href: '#',
html: 'click me',
onclick: this.resellerWindow }
Make sure that, scope in linkRenderer is grid, by settings 'scope: this' in that column definition. So that this.resellerWindow refers to grid's function.
try returning created object.

Populating combo from XmlStore with Ext js designer

I am trying to get working a simple (noob) examle of Combo loaded with data from Xml file.
Here is my xml:
<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<name>Savings Account</name>
<id>1</id>
</account>
<account>
<name>Current Account</name>
<id>2</id>
</account>
</accounts>
When I configure and add XmlStore, it reports 2 records found.
Here is the code for the XmlStore:
cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
}, cfg));
}
});
new cteo();
finally, this is the code for the combo:
MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Cuenta Origen'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'name',
valueField: 'id'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});
It must be something simple, but I am stuck...

This will not do anything:
store: 'cteo',
You need to pass in the object reference that you assigned earlier, not a string:
store: cteo,
Alternately, you could call Ext.StoreMgr.lookup('cteo'), but judging by your code I assume that the variable reference was your intention.
One comment on your code. Doing this:
cteo = Ext.extend(Ext.data.XmlStore, {
...
cteo();
...is a bit strange, and is most likely creating a global variable in the window scope (assuming that cteo is not defined as a var somewhere earlier). Think of it as defining a custom class, then creating a new instance of the class you defined. Also, think about your naming -- a store subclass should be a specific type of store, which should be evident in the name. Typically, your code should look more like this:
Ext.ns('MyNamespace');
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
...
});
var cteoStore = new CteoStore();
Oh yeah, one other thing. You do not need to override the constructor for the sole purpose of providing default configs. Just do this:
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
});
This is also more useful since these configs are overrideable, unlike in your example. This makes it more reusable (like if you ever wanted to assign a different id to another instance).

Check out this thread at sencha site:
http://www.sencha.com/forum/showthread.php?105818-(noob)-Populating-combo-from-XmlStore-with-Ext-js-designer