Develop Reference

Feeding the dataview from JsonStore

Feeding the viewdata from the jsonstore
I want to use a JsonStore to feed my dataview. currently with the code below, the store is empty in the dataview. For testing, I wrote some code in the controller before opening the window and I can
see that the restful service retrieves data - getActivitiesToRescueCallback --> responce.responseText.
How can I feed my dataview with the Jsonstore?
In th ViewController:
getActivitiesToRescueCallback : function(options, success, response) {
if (success)
var result = Ext.decode(response.responseText); // Here I am getting data
},
getActivitiesToRescue : function() {
Ext.Ajax.request({
url : '/test/json_p',
params : {
"params[]" : "RESCUE",
"respName" : "",
"method" : "GetActivities",
"format" : "json"
},
callback : 'getActivitiesToRescueCallback',
scope : this
});
},
**View**
Ext.define('Tuv.test.rescue.RescueView', {
extend : 'Ext.window.Window',
alias : 'widget.rescueview',
alias : 'controller.rescueview',
bind : {
title : '{rescueTexts.masseRescue}'
},
height : 400,
width : 600,
constrainHeader : true,
maximizable : true,
closeAction : "hide",
layout : 'card',
activeItem : 0,
items : [ {
xtype : 'panel',
title : 'check activities',
layout : 'hbox',
border : false,
layoutConfig : {
align : 'stretch'
},
tbar : [ {
xtype : "button",
text : "copy",
handler : function() {},
scope : this
} ],
items : [ {
autoScroll : true,
width : 150,
items : {
xtype : 'dataview',
listeners : {
'afterrender' : function(comp) {
console.log('Test');
},
scope : this
},
store : new Ext.data.JsonStore({
url : '/test/json_p',
baseParams : {
"params[]" : "RESCUE",
respName : "",
method : "GetActivities",
format : "json"
},
idProperty : 'ACT_ID',
fields : [ 'ACT_ID', '_ACT_TYPE', '_FIRST_FORM', 'PRUEFSTATUS', '_DEBUG', '_SYNC_STATUS', '_SYNC_STATUS2', 'EQART', 'INVNR', 'ZTSPRID', 'ANLAGE_ZTSPRID', 'ZTSPRIDT' ]
}),
itemSelector : 'tr.dataRow',
tpl : new Ext.XTemplate('<table id="dataRescueTable">' + '<tpl for=".">', '<tr class="dataRow"><td>' + '<span <tpl if="STATUS==50">style="font-weight: bold;color:green"</tpl>>{name}</span></td></tr>', '</tpl>', '</table>')
}
} ],
bbar : {
buttonAlign : 'right',
items : [ {
text : "next",
handler : function(button) {
},
scope : this
} ]
}
} ]
});

To load the store I had to call store.load() or adding autoLoad: true as a config to the store.

Autoload Panel Listener ExtJs

I have view file in extjs with a listener code, here it is:
initComponent: function() {
Ext.apply(this, {
title : 'Form Order',
iconCls : 'orderIcon',
width : 850,
maxHeight : 600,
x : 200,
y : 50,
resizable : true,
resizeHandles : 's n',
constrainHeader : true,
closable : true,
modal : true,
autoShow : false,
autoScroll : true,
overflow : 'auto',
layout: {
type: 'auto',
align: 'stretch'
},
items: [
this.createPanelMC()
]
});
this.callParent(arguments);
},
createPanelMC: function() {
this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var panel = Ext.create('Ext.form.Panel', {
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
xtype : 'fieldset',
name : 'modlayanan',
title : 'Data Pelanggan',
layout : 'column',
width : '95%',
margin : '10',
items: [{
xtype : 'textfield',
name : 'nomor',
id : 'nomor',
itemId : 'nomor',
fieldLabel : 'PSTN',
emptyText : 'Nomor...',
margin : '10 0 0 0',
width : 350,
labelWidth : 100,
afterLabelTextTpl: this.requiredSign
}, {
xtype : 'textfield',
fieldLabel : 'Speedy',
name : 'speedy',
id : 'speedyVal',
itemId : 'speedyVal',
margin : '10 0 10 20',
width : 350,
labelWidth : 100
}, {
xtype : 'textareafield',
name : 'instaLAddress',
fieldLabel : 'Alamat Instalasi',
emptyText : 'Alamat Instalasi...',
readOnly : true,
labelWidth : 100,
autofocus: true,
//listener
listeners : {
render: function() {
this.getEl().on('mousedown', function(e, t, eOpts) {
var nopstn = Ext.getCmp('nomor').getValue();
var speedy = Ext.getCmp('speedyVal').getValue();
if (nopstn != '' && speedy != '') {
var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
console.log(store);
store.load({
params: {
nopstn: nopstn,
speedy: speedy
}
});
}
});
}
}
},
this.createTreePaketExist(),
]
}]
});
return panel;
},
createTreePaketExist: function() {
var storeTree = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/newoss_get_paket.php',
actionMethods :{
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
}
}
});
var groupProduct = Ext.create('Ext.tree.Panel', {
store : storeTree,
itemId : 'treeProduct',
renderTo : Ext.getBody(),
name : 'treeProduct',
rootVisible : false,
useArrows : true,
layout :'fit',
margin : '0 0 0 0',
autoScroll : true,
height : 150,
width : '93%',
listeners:
{
checkchange: function(node, checked, eOpts){
node.eachChild(function(n) {
node.cascadeBy(function(n){
n.set('checked', checked);
});
});
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !!pChildCheckedCount);
});
p.resumeEvents();
}
}
});
return groupProduct;
}
and the listener will show tree panel in createTreePaketExist(). the problem is.. i want show tree panel result without click anything,just show the result when panel is loading.
in my code, the result will show after i put pointer in textareafield. how can it just show without any click, just show when panel loaded? anybody can help me? thanks..

I think this has already been answered in your previous Question.
The issue that you are having here is that your store is dependent on user typed values, so your store can't load until the user has done something.
So you cannot automatically load the store without the values unless you provide default values to load the store with and then it can reload with different data if the user enters new information.
Its difficult to provide an in-depth answer to this without knowing what data the store is working with, how it is filtered based on the user data, what data they can enter or you expect them to enter.

Adding form values into grid using extjs

In my JavaScript file I have the following store variable:
Ext.onReady(function() {
var store2 = Ext.create('Ext.data.Store', {
storeId : 'employeeStore',
fields : [ 'firstname', 'lastname', 'age' ],
data : [ {
firstname : "Michael",
lastname : "Scott",
age : "7",
}, {
firstname : "Caroline",
lastname : "Schrute",
age : "2",
}, {
firstname : "Jim",
lastname : "Halpert",
age : "3"
}, {
firstname : "Kevin",
lastname : "Malone",
age : "4",
}, {
firstname : "Angela",
lastname : "Martin",
age : "5",
} ]
});
and a couple lines after in my panel i have a couple of form fields:
Ext.create('Ext.form.Panel', {
title : 'Person Info',
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 900,
renderTo : Ext.getBody(),
layout : 'column',
// arrange fieldsets side by side
items : [
{
// ***** Person Info*****
// Fieldset in Column 1 - collapsible via toggle button
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Person Details',
collapsible : true,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
layout : 'anchor',
items : [
{
fieldLabel : 'First Name:',
name : 'PersonFirstName'
},
{
fieldLabel : 'Last Name:',
name : 'PersonLastname'
}
(etc...)
In this panel I also have a button that is suppose the store the values into a grid when clicked
{
text : 'Add Person',
xtype : 'button',
// margin: '0 0 0 100',
formBind : true,
// only enabled once the form is valid
disabled : true,
handler : function() {
// write code to add all fields to the grid
var form = this.up('form').getForm();
var vals = form.getValues();
store2.add(vals);
}
},
{
xtype : 'grid',
title : 'Family Details',
store : Ext.data.StoreManager.lookup('employeeStore'),
columns : [ {
text : 'First Name',
dataIndex : 'firstname',
type : 'string'
}, {
text : 'Last Name',
dataIndex : 'lastname',
type : 'string'
}, {
text : 'Age',
dataIndex : 'age',
type : 'string',
}, ],
width : 400,
forceFit : true,
renderTo : Ext.getBody()
} ]
When I press the button I'm not able to see the values in the grid. It's only returning an empty row.

You might have to add the proxy config to your store and check once.
For more info check this example from sencha here
And also check whether your store is loaded or not.

It's hard to tell where exactly the problem. I would start as following:
Remove from the grid all the columns and stay with only one. (lastname for example)
This step will check if the problem is occurred because mapping data to the state.
When you are clicking the button , use dummy data first in order to see that appending to the store is working.
var objectCollection = new Array();
var objectItem = new Object();
objectItem.lastname = "TestName";
objectCollection.push(objectItem);
store2.loadData(objectCollection);
In addition , I see that you defined values in store , but do not use 'autoLoad' property.
It should populated as true ('autoLoad:true').

Form field names should match with the grid columns data index . in our case form field name of person first name is "name : 'PersonFirstName'" so data index of the grid column Firs name should be "PersonFirstName" or vice versa.

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.