Setting the reader on a extjs store - extjs4

I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.
For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.
for reference:
example
Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('Cliente', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'RazaoSocial',
type: 'string'
}, {
name: 'TipoDeCliente',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Cliente',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Cliente/ObterClientes',
extraParams: {
nome: '',
tipopessoa: '',
email: '',
cpf: '',
estado: '',
cidade: '',
cep: ''
},
reader: {
type: 'json',
root: 'data'
},
simpleSortMode: true
},
sorters: [{
property: 'Email',
direction: 'DESC'
}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 500,
height: 250,
title: 'Array Grid',
store: store,
selModel: sm,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
hidden: true
}, {
text: 'Nome',
width: 150,
sortable: true,
dataIndex: 'Nome'
}, {
text: 'Tipo de Cliente',
width: 100,
sortable: true,
dataIndex: 'TipoDeCliente'
}, {
text: 'Email',
width: 150,
sortable: true,
dataIndex: 'Email'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo clientes {0} - {1} of {2}',
emptyMsg: "Nenhum cliente"
}),
renderTo: 'clientes',
});
store.loadPage(1);

The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data.
Also load the data like this store.load(); instead of loadPage.
EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.

Related

Ext JS - Populate combobox using value from another Combobox from Database (SQL)

I have two combobox, values are coming from database i am using json to populate the same. Second combo gets populated when the first combo changes. First time when we set the value of the first combo it works like magic. But second time, it does not get bind. and throws an error
This is my running code:
<script type="text/javascript">
Ext.onReady(function() {
var serverStore = Ext.create('Ext.data.Store', {
storeId: 'serverStore',
fields: [
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
sqlQuery: 'select distinct(u_hostname) from SCRIPT_SCHEDULE'
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsStore = Ext.create('Ext.data.Store', {
storeId: 'dpsStore',
fields: [
{
name: 'u_username',
mapping: 'u_username',
type: 'string'
},
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsCombo = Ext.create('Ext.form.ComboBox',{
id: 'dpsCombo',
fieldLabel: 'Username',
hidden: false,
margin: '5 0 0 25',
queryMode: 'local',
valueField: 'u_username',
displayField: 'u_username'
});
var serverCombo = Ext.create('Ext.form.ComboBox',{
id: 'serverCombo',
fieldLabel: 'Server Name',
hidden: false,
margin: '5 0 0 25',
store: serverStore,
queryMode: 'local',
valueField: 'u_hostname',
displayField: 'u_hostname',
listeners: {
change: changeStore
}
});
function changeStore(combo, value){
var store;
store = dpsStore;
var combobox = Ext.getCmp('dpsCombo');
combobox.clearValue();
console.log(value);
store.getProxy().setExtraParam("sqlQuery", `select distinct(u_username) from SCRIPT_SCHEDULE where u_hostname ='${value}'`);
console.log(value);
combobox.bindStore(store);
store.load();
}
Ext.create('Ext.container.Viewport', {
id: 'processviewport',
layout: 'border',
items: [{
xtype: 'panel',
id: 'filterPanel',
layout: 'hbox',
title: 'Data filter',
region: 'north',
collapsible: true,
items: [{
xtype: 'panel',
layout: 'hbox',
flex: 2,
items:[
{
xtype: 'panel',
layout: 'vbox',
items: [
serverCombo,
dpsCombo
]
}]
}]
}]
});
});
</script>
Error :
Uncaught TypeError: Cannot read property 'call' of undefined
The issue the combobox was not rendering data on the second change was resolved by adding lastQuery: field in the second combo.

Set the edited row in EXTJS grid after editing without refreshing page

I am editing a row in EXTJS grid on clicking the edit action link. On clicking the edit link of a row a new window opens with all the data of the row and "Save" and "Cancel" button.
On clicking the "Save" button, it is saving the record in database. But I want the row should also get refreshed without refreshing the page.
I am new to EXTJS.
Can any one help me to do the same.
Here is my code.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ID',
type: 'int'
},
{
name: 'jobNo',
type: 'int'
},
{
name: 'stageCode',
type: 'String'
},
{
name: 'productTitle',
type: 'String'
},
{
name: 'brand',
type: 'String'
},
{
name: 'category',
type: 'String'
},
{
name: 'ftpDate',
type: 'Date'
}],
idField: 'ID'
});
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: 'TestResult',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
url : 'data.jsp',
reader :
{
type : 'json'
},
writer :
{
type : 'json'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Buffered Grid of records',
store: store,
loadMask: true,
plugins: 'bufferedrenderer',
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: 'Department: {name}',
showSummaryRow: false
}],
// grid columns
columns:[{
text: 'ID',
sortable: true,
dataIndex: 'ID',
groupable: false,
locked: true,
width: 70
}, {
text: 'Job No.',
sortable: true,
dataIndex: 'jobNo',
groupable: false,
locked: true,
width: 120
}, {
text: 'Version',
dataIndex: 'stageCode',
groupable: false
}, {
text: 'Product Title',
dataIndex: 'productTitle',
groupable: false
}, {
text: 'Brand',
dataIndex: 'brand',
groupable: false
}, {
text: 'Category',
dataIndex: 'category',
width: 200,
groupable: false
}, {
text: 'FTP Date',
dataIndex: 'ftpDate',
xtype: 'datecolumn',
groupable: false
},
{
xtype:'actioncolumn',
header:'Edit',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
editForm.show();
editForm.down('form').loadRecord(rec);]
}],
renderTo: Ext.getBody()
});
var editForm = new Ext.Window({
title: 'Edit Window',
items:[
{
xtype: 'form',
url: 'UpdateController',
items: [
{
xtype: 'hidden',
fieldLabel: 'ID',
name: 'ID',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Job No.',
name: 'jobNo',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Version',
name: 'stageCode',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Product Title',
name: 'productTitle',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Category',
name: 'category',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Brand',
name: 'brand',
allowBlank: false
},
{
xtype: 'datefield',
fieldLabel: 'FTP Date',
name: 'ftpDate',
allowBlank: false
}],
buttons : [{
text : 'Save',
handler: function()
{
this.up('form').getForm().submit(
{
success: function(f,a)
{
store.save();
var win = Ext.WindowManager.getActive();
if (win)
{
win.hide();
}
},
failure: function(f,a)
{
//Ext.Msg.alert('Warning', 'Error');
Ext.Msg.alert('Warning', a.result.errormsg);
this.up('window').hide();
}
});
}
},
{
text: 'Cancel',
handler: function()
{
this.up('window').hide();
}
}]
}
]
});
});
Thanks
In your this.up('form').getForm().submit success handler you can update record, which you loaded into form, by using Ext.form.Basic updateRecord method.
So just add into success handler code:
// update record with form data
f.updateRecord();
// mark record as synchronized with server (because you already sent data to server with form submit method)
f.getRecord().commit();

ExtJs:Show Grid after Button is clicked

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.

extjs4 paging grid reloading store on paging event

i have a paging grid and some function that load a new store to the grid, but when i click on the next page it reverts back to the initial store
the grid:
Ext.define('Pedido', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'CPF/CNPJ',
type: 'string'
}, {
name: 'Data',
type: 'datetime'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'StatusPagamento',
type: 'string'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'Total',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Pedido',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Pedido/ObterPedidosPorInquilino',
reader: {
root: 'Items',
totalProperty: 'TotalItemCount'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'grid',
width: 500,
height: 250,
title: 'Array Grid',
store: store,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
width: 50
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo {0} - {1} de {2}',
emptyMsg: "Nenhum pedido"
}),
renderTo: 'pedidos'
});
store.load({
params: {
start: 0,
limit: 10
}
});
and the function that set the new store
store.load({
params: {
param: newparam
}
});
also, when I call this function, I would like to set the label on the viewing page x of y back to 1, since setting a new store takes you back to the first page
thanks again
I am not sure why you are replacing the store when you page through your data..but notice the paging toolbar is bound to the store as well as the grid itself. If you are going to change the underlying store here you will need to rebind columns, and the paging bar. Try the reconfigure method http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-method-reconfigure
Again I think you need to reevaluate your use case and perhaps think of a different way of accomplishing what you are doing.

extjs4 render component in tab panel

As you might notice, I'm a newbie in extjs; I have managed to do some stuff myself but the truth is that I don't understand certain things.
I have this tree on the left side, and a content panel with a tab panel on the right side. Basically what I want is to load different options (calling different components) on the tab panel when the user clicks on the tree on the left side. Right now, when the user clicks on the first of the options, it displays the components that are related to that option on the content panel. (I'm sure is not the most elegant way of showing this, but at least for now it works) however, my problem is the fact that the components doesn't seem to load in the right tab, once it loads, even if I change tabs the components stay in the same place.
I have tried using the rbac.tabs.doLayout(); after reading some topics here in the forum, with no success.
I really appreciate the help you guys can give me so i can point in the right direction.
Here is my code:
rbac.userPanel = Ext.create('role.formUserRbac');
rbac.grid = Ext.create('role.gridUserRbac');
rbac.tabsShowPanel = Ext.define('mainPanel',{
extend:'Ext.panel.Panel',
border:'false',
initComponent: function() {
this.callParent();
},
items:[rbac.userPanel,rbac.grid]
});
tabsShowPanel = Ext.create('rbac.tabsShowPanel');
function test(nameTab,des){
rbac.addTab(true,nameTab);
console.log(des);
if (des=='users'){
//console.log(rbac.tabs.addDocked(rbac.testPanel));
rbac.tabs.addDocked(tabsShowPanel)
}
}
Ext.define('treeModel', {
extend: 'Ext.data.Model',
fields: [
{mapping: 'id', name: 'id', type: 'string'},
{mapping: 'text', name: 'text', type: 'string'},
{mapping: 'descripcion', name: 'descripcion', type: 'string'},
]
})
rbac.TreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'service.php',
extraParams: {
accion:'loadtree'
},
reader: {
type: 'json',
root: 'nodes',
}
},
autoLoad:true,
sorters: [{
property: 'id',
direction: 'ASC'
},{
property: 'id',
direction: 'ASC'
}],
root: {
id: 0,
expanded: true
},
model:'treeModel'
});
rbac.treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Navegaci\u00f3n',
region:'west',
split: true,
height: 360,
width: 180,
minSize: 150,
rootVisible: false,
autoScroll: true,
collapsible: true,
collapseMode: 'mini',
store: rbac.TreeStore
});
var currentItem;
rbac.tabs = Ext.create('Ext.tab.Panel', {
resizeTabs: true,
enableTabScroll: true,
defaults: {
autoScroll:true,
bodyPadding: 10
},
items: [{
title: 'Men\u00FA Principal',
iconCls: 'tabs',
closable: false
}]
});
rbac.addTab = function (closable,tabName) {
rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
}).show();
//rbac.tabs.doLayout();
}
rbac.treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
var des = record.data.descripcion;
var nameTab = record.data.text;
test(nameTab,des);
}
});
rbac.contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [rbac.tabs],
};
rbac.panel = Ext.create('Ext.Viewport', {
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<img src="images/test.png"/>',
height: 70
},{
layout: 'border',
id: 'layout-browser',
region:'center',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [rbac.treePanel, rbac.contentPanel]
}],
renderTo: Ext.getBody()
});
Solved:
rbac.addTab = function (closable,tabName) {
return rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
});
}
function test(nameTab,des){
var newTab = rbac.addTab(true,nameTab);
rbac.tabs.setActiveTab(newTab);
if (des=='users'){
newTab.add(tabsShowPanel)
}
}