Related
I have a model, a store and a grid (which will be populated with the data in the store). On clicking on a row in the grid, it opens up a window which has a testbox, a panel which intern holds another grid. My data is nested and I'm finding it difficult to pass the values to the grid. Below is my model, store and the components.
Ext.onReady(function() {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'senority', type: 'int' },
{ name: 'dep', type: 'auto' },
{ name: 'dep_id', type: 'int', mapping: 'dep.dep_id'},
{ name: 'dep_Name', type: 'string', mapping: 'dep.dep_Name'},
{ name: 'hired', type: 'string' }
]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId:'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael",
lastname:"Scott",
senority:7,
dep:[{
dep_id: 1000,
dep_Name: 'HR'
}],
hired:"01/10/2004"},
{firstname:"Dwight",
lastname:"Schrute",
senority:2,
dep:[{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired:"04/01/2004"}
]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
rIx=rowIndex;
Ext.create('MyWindow',{rIx: rowIndex}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function(){//alert("-->");
//grid inside the panel which is in window
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Department ID',
dataIndex: 'dep_id'
},
{
text: 'Department Name',
dataIndex: 'dep_Name'
}
],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function(win){
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Im trying it with mapping and Im not able to see any data in the grid inside the panel. On clicking on the first row, the text box inside the window should display firstname( which is working fine), and the grid inside the window should display department id and department name of that particular employee alone. First, i tried with hasMany and belongsTo, but of no luck. Now I'm trying with mapping. Pls help....
You indeed use hasMany in your mapping.
I've made a fiddle for you with your example, I changed a few stuff arround, it's working now. http://jsfiddle.net/johanhaest/UehS2/
Ext.onReady(function () {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'senority',
type: 'int'
}, {
name: 'dep'
}, {
name: 'hired',
type: 'string'
}]
});
Ext.define('Department', {
extend: 'Ext.data.Model',
fields: [{
name: 'dep_id',
type: 'int'
}, {
name: 'dep_Name',
type: 'string'
}]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
senority: 7,
dep: [{
dep_id: 1000,
dep_Name: 'HR'
}],
hired: "01/10/2004"
}, {
firstname: "Dwight",
lastname: "Schrute",
senority: 2,
dep: [{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired: "04/01/2004"
}]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
},
{
header: 'Button',
xtype: 'actioncolumn',
icon: 'test.png',
handler: function (grid, rowIndex, colIndex, item, e, record) {
rIx = rowIndex;
Ext.create('MyWindow', {
rIx: rowIndex
}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store: Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id: 'fname',
fieldLabel: 'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function (panel) { //alert("-->");
//grid inside the panel which is in window
var emplStore = Ext.data.StoreManager.lookup('employeeStore');
var win = panel.up('window');
var depStore = Ext.create('Ext.data.Store', {
model: 'Department',
data: emplStore.getAt(win.rIx).get('dep')
});
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: depStore,
columns: [{
text: 'Department ID',
dataIndex: 'dep_id'
}, {
text: 'Department Name',
dataIndex: 'dep_Name'
}],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function (win) {
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Note that your code can be optimised a lot, but I focused on your current prob.
I have a store, a grid, a window and a few text boxes in the window. What I need is that on clicking the actioncolumn in the grid, i need to get the rowIndex of the clicked row and pass it to the window as a parameter. There, i need to load the store and get the values and set it in the appropriate textboxes. I'm not sure how to pass the rowIndex from grid to window on click. Wen I try to alert the value of a in the testfunction, it comes up as undefined. Pls help and below is my code.
Js File:
Ext.onReady(function() {
var rIx;
Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
]
});
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
rIx=rowIndex;
//var rec = grid.getStore().getAt(rowIndex);
//alert("Edit " + rec.get('firstname'));
Ext.create('MyWindow').show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
var testFunction = function(a){alert("a= "+a);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(a);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
};
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 250,
width: 250,
title: 'My Window',
items: [
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
}
],
listeners: {
afterrender: Ext.Function.pass(testFunction, [rIx])
}
});
});
Ext.Function.pass(testFunction, [rIx]) takes the current value of rIx when pass is executed. The method is being called long before rIx is ever set to anything meaningful. Javascript is a pass-by-value language. It doesn't matter that eventually rIx gets set to the row index. By that point Ext.Function.pass has already been executed and the parameter it passed in was undefined.
Another approach is to just push the rowIndex onto your window as a property.
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
Ext.create('MyWindow', {rIx: rowIndex}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 250,
width: 250,
title: 'My Window',
items: [
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
}
],
listeners: {
afterrender: function(win){
alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
Another option is to setup the window's afterrender listener in your handler function instead of adding it in the window's class definition. This approach is a bit cleaner in my opinion. I'm not a big fan of adding unrelated state properties to components.
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
var win = Ext.create('MyWindow');
// add the listener after to avoid bashing any listener config
// that may already exist for the window.
win.on('afterrender', function() {
// rowIndex is available in the closure
alert("idx= " + rowIndex);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(rowIndex);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
});
win.show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
I have a form in which the values for the Grid is populated as soon as the Form is displayed.But i need to populate the grid after the button is clicked based on text box values.
ExtJs:
var url = location.href.substring(0,location.href.indexOf('/', 14));
var grid;
var store;
var userStore;
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'},
{ name: 'gender' ,mapping:'personalInfo.gender'},
{ name: 'email' ,mapping:'personalInfo.address.email'}
]
});
store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
function swapStrore(){
//userStore = store;
userStore = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
Ext.getCmp('userGrid').getView().refresh();
return userStore;
}
function updateUsers(id){
window.location = url+'/lochportal/createUser.do';
}
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 900,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
},{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'firstName'
},{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
//console.log(response);
//swapStrore();
}
});
}
}
},{
xtype: 'button',
text: 'Cancel',
listeners: {
click: function(){
window.location = url+'/lochportal/viewSuccessForm.do';
}
}
},
grid = Ext.create('Ext.grid.Panel', {
//plugins: [rowEditing],
id:'userGrid',
width: 900,
height: 300,
frame: true,
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
},
{
text: 'Gender',
flex: 1,
sortable: true,
dataIndex: 'gender',
field: {
xtype: 'textfield'
}
},
{
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},
{
xtype: 'actioncolumn',
width: 50,
items:[{
icon : '/lochportal/extJS/resources/themes/images/access/window/edit.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Sell " + rec.get('id'));
updateUsers(rec.get('id'));
}
}]
}]
})]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to populate the grid after search button is clicked?
Thanks
Use bindStore() method of the grid to assign new or different store to grid which is already displayed. If you want to first show an empty grid - either filter all records out or assign store property to null initially.
I did the following code to list the searched items in the grid.
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to Fit the grid inside the Search User window
Add an icon in the grid,so that by clicking on that icon the values from the
grid must be populated to entry form for update.
Here with your code, I've found something:
Use renderTo: "searchUsers" for both FormPanel and the Grid: You add the FormPanel to the window, so this config should not exist (Please refer to renderTo document). So remove them.
Use frame: true for both FormPanel and the Grid: There you have the window as container, so the Form and Grid have been framed inside. So remove them.
You dynamically add the Grid on searching: I recommend you create the result Grid as a separate component (not inside success's result) and specify both Form and Grid as items' components of window. You still can config the Grid with hidden. When Ajax is successful, you can fill the Grid with data returned and show it.
"add an icon in the grid": You can specify a new column in columns of the Grid and use renderer config of grid panel to show the button. For example:
renderer: function(v) {
return "<input type='button'.../>";
}
Finally, you can catch the itemclick event of the grid to know if the column of the clicked cell is the cell which contains the button, the entry will be populated to somewhere you want. Don't forget to specify the grid's Selection model as cellmodel
I want to add a simple validator to verify that "password" and "confirm password" are equal, here is the code :
Ext.apply('Ext.form.VTypes',{
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : 'Passwords do not match'
});
var genders = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Male"},
{"abbr":"AK", "name":"Female"}
]
});
//****************************************
Ext.define('AM.view.user.Inscription', {
extend: 'Ext.form.Panel',
alias: 'widget.inscription',
title: 'Formulaire',
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side'
},
items: [{
xtype: 'container',
anchor: '100%',
layout:'column',
items:[{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
anchor:'40%',
//maxLength : '10'
},{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
allowBlank:false,
anchor:'40%'
},{
xtype:'textfield',
inputType: 'password',
fieldLabel:'Password',
name:'pass',
id : 'pass',
allowBlank:false,
anchor:'40%'
},{
xtype:'textfield',
inputType: 'password',
fieldLabel:'Confirm Password',
name:'confirmPass',
allowBlank:false,
vtype : 'password',
initialPassField : 'pass',
//autoRender : true,
anchor:'40%'
}]
},{
xtype: 'container',
columnWidth:.5,
layout: 'anchor',
items: [{
xty pe:'combobox',
fieldLabel: 'Sexe',
store: genders,
queryMode: 'local',
displayField: 'name',
allowBlank : false,
name: 'gender',
editable : false,
anchor:'30%',
},{
xtype:'textfield',
fieldLabel: 'N° Téléphone',
name: 'phone',
allowBlank:false,
anchor:'40%'
}]
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Reset'
},{
text: 'Cancel'
}]
});
whene I start write in the confirm password textfield I get this in chrome developer tool :
Uncaught TypeError: Object [object Object] has no method 'password'
can someone tell me what I miss here ? thank you at advance.
UPDATE
the application is an MVC application and this file (the code above) is in View folder, and I'm calling this view in the app.js like this :
Ext.require([
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table'
]);
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout : 'auto',
//layout : 'vbox',
renderTo: document.body,
items: [{
xtype : 'usertoolbar',
},{
html : '<br><br>'
},{
xtype: 'inscription',
},{
xtype: 'userlist',
}]
});
}
});
Also any notes about my methodology of structuring code are welcome
Change Ext.form.VTypes to Ext.form.field.VTypes in the first line. See if it helps.
Update: change your validate function to:
password : function(val, field) {
console.log(val, field);
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
console.log(pwd);
return (val == pwd.getValue());
}
return true;
},
Change Ext.form.VTypes to Ext.form.field.VTypes. And try to remove quotes around 'Ext.form.field.VTypes'. E.g.:
Ext.apply(Ext.form.field.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
}
The solution is to remove quotes around 'Ext.form.field.VTypes'
Ext.apply(Ext.form.field.VTypes, {
password: function (val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'Passwords do not match'
});