I have this code :
Ext.define('MyDesktop.Opport', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
/***********************/
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
/***********************/
],
id:'opp',
createWindow : function(){
var storeop = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'PHP/afficherop.php',
reader: {
type: 'json', // format fichier : JSON
root: 'enregistrements', // D?but des donn?es
idProperty: 'id' // cl? primaire
}
},
fields: ['id','date','infos','idProd','idcl']
});
var storecl = Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'ajax',
url: 'PHP/afficher.php',
reader: {
type: 'json', // format fichier : JSON
root: 'enregistrements', // D?but des donn?es
idProperty: 'id' // cl? primaire
}
},
fields: ['id','type','nom','prenom','mat']
});
storecl.load();
var desktop = this.app.getDesktop();
var win = desktop.getWindow('opp');
/*******************/
if(!win){
win = desktop.createWindow({
id: 'opp',
title:'Opportunités',
width:500,
height:480,
iconCls: 'bogus',
animCollapse:false,
constrainHeader:true,
layout: 'border',
align: 'center',
items: [
{
xtype: 'grid',
flex: 1,
split: true,
border: true,
region: 'center',
store: storecl,
title: 'Client',
columns: [
// new Ext.grid.RowNumberer(),
{text: 'ID',dataIndex: 'id'},
{ text: 'type',align: 'center',dataIndex: 'type'},
{ text: 'nom',align: 'center',dataIndex: 'nom'},
{ text: 'Prénom',align: 'center',dataIndex: 'prenom'},
{ text: 'Matricule',align: 'center',dataIndex: 'mat'}
],
listeners: {itemdblclick: function(grid ,record){
var rr = grid.getSelectionModel();
var rs = rr.getSelection();
var idc = rs[0].get('id');
Ext.Ajax.request({
url: 'PHP/op.php',
params: {
idcl: idc
}
});
storeop.load({params:{idcl: idc}});
}}
},{
xtype: 'grid',
flex: 1,
region: 'south',
border: true,
store: storeop,
title: 'Liste des opportunités',
columns: [
// new Ext.grid.RowNumberer(),
{text: 'ID',dataIndex: 'id'},
{ text: 'Date',align: 'center',dataIndex: 'date'},
{ text: 'Info',align: 'center',dataIndex: 'infos'},
{ text: 'Produit',align: 'center',dataIndex: 'idProd'},
{ text: 'CLient',align: 'center',dataIndex: 'idcl'}
]
}
]
})
}
return win;
}
});
I want the second grid to dsiplay the records loaded from the store storeop with parameters selected from the first grid. Any help?
you can get the selected row from the first grid:
var selectedRecord = firstGrid.getSelectionModel().getSelection()[0];
here, i assume that you have a single selection model. To load this selectedRecord to your second grid, you have to loadData to its store.
list.push(selectedRecord.data);
secondGrid.store.loadData(list, false);
take note that you have to use different store for each grid.
You need a second Store instance for your second grid. Do not use the same store for both grids.
Related
The total number of rows is correctly showing in pagination but Pagination is not updating the view when the next button is clicked.
I'm new to Sencha. In Mysql, I'm returning all rows. So that I can limit in client side. If I limit the rows in backend, I cannot have all the rows in client side.
View: List.js
/*** This view is an example list of people.
*/
Ext.define('CRUD.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'home',
requires: [
'CRUD.store.Personnel'
],
title: 'Heroes',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
layout: 'fit',
fullscreen: true,
store: {
type: 'personnel',
},
columns: [
{ text: 'Name', dataIndex: 'name', sortable: true, flex: 1 },
{ text: 'Email', dataIndex: 'email', sortable: true, flex: 1 },
{ text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 }
],
bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
// columns: [
// { text: 'Name', dataIndex: 'name', flex: 1 },
// { text: 'Email', dataIndex: 'email', flex: 1 },
// { text: 'Phone', dataIndex: 'phone', flex: 1 }
// ],
listeners: {
select: 'onItemSelected',
},
});
Store: Personnel.js
Ext.define('CRUD.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'CRUD.model.User',
id: 'list',
fields: [
'name', 'email', 'phone'
],
// data: [
// { name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
// { name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
// { name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
// { name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
// ],
autoLoad: {
start: 0,
limit: itemsPerPage
},
buffered: true,
pageSize: itemsPerPage,
remoteSort: true,
proxy: {
type: 'jsonp', //cross domain calls - json parser
url: 'http://localhost:8080/list',
enablePaging: true,
reader: {
type: 'json',
totalProperty: 'total'
},
},
// proxy: {
// type: 'memory',
// reader: {
// type: 'json',
// }
// },
});
bbar: {
store: {
type: 'personnel',
},
xtype: 'pagingtoolbar',
displayInfo: true
},
I have removed store inside bbar and it works. Thanks for being cooperative.
The way you're using the store, ExtJS will do a request every time you change the page, sending the page number parameter to the URL set to the store.
If you want to do client-side pagination using ExtJS, you must set your store's proxy type to memory, load your data into the store and then ExtJS Grid will handle pagination as you expect.
Do an Ext.Ajax.Request like that:
Ext.Ajax.request({
url: 'http://localhost:8080/list',
success: function(response) {
dataStore.setProxy({
type: "memory",
enablePaging: true,
data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure
});
dataStore.load();
}
});
For cross domain, you can make a call to Ext.data.JsonP.request() method and process the response as shown in the code below:
Ext.data.JsonP.request({
url: 'data1.json',
success: function (response) {
var myData = [];
Ext.Array.forEach(response.data, function (item) {
myData.push({
name: item.name,
email: item.email,
phone: item.phone
});
});
store.setProxy({
type: "memory",
enablePaging: true,
data: myData
});
store.load();
}
});
Check this fiddle for complete working example.
The setup:
I have a grid with a roweditor plugin. On the toolbar I have a "add new" button to insert a new row.
The problem:
When I'm trying to add a new record my store.insert(0, rec), doesn't seems to add the record on the 0 index.
My view:
Ext.define("app.view.partners.Partners",{
extend: "Ext.grid.Panel",
alias: 'widget.partners',
requires: [
"Admin.view.partners.PartnersController",
"Admin.view.partners.PartnersModel"
],
height: 700,
controller: "partners",
viewModel: {
type: "partners"
},
bind: {
store: '{partners}'
},
title: "Partners List",
columns: [
{ header: 'id', dataIndex: 'id', hidden: true},
{ header: 'Partner', dataIndex: 'Partner', flex: 3,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
tbar: [{
text: 'Add record',
iconCls: 'fa fa-plus-square green',
handler: 'onAddClick'
}],
selType: 'rowmodel',
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
pluginId: 'partnersRowEditingPlugin',
autoCancel: false,
listeners: {
edit: 'onEditClick',
canceledit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
},{ptype: 'bufferedrenderer'},
{ptype: 'gridfilters'}
]
});
My viewmodel:
Ext.define('app.view.partners.PartnersModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.partners',
stores: {
partners:{
model: 'app.model.Partners',
storeId: 'partners',
autoLoad: true,
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy:{
type: 'ajax',
// load remote data using HTTP
url: 'read.php',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'data',
totalProperty:'total'
}
}
}
}
});
and in the viewcontroller:
onAddClick: function(){
var rec = new app.view.partners.PartnersModel({});
//var rec = new new Admin.model.Partners({});
this.isNewRecord = true;
var store = this.getView().getStore();
store.insert(0, rec);
this.getView().getPlugin(controllerName + 'RowEditingPlugin').startEdit(0,0);
}
here is a console.log after store.insert(0,rec)
It appears that the store does the insert, but it is inserted last. I can see it added on the grid as the last record.
I don't know what I am doing wrong.
RowEditing with Combobox - changes (click row editing) shown "id",
should be displayed "displayField"
pic - i65.fastpic.ru/big/2014/0724/46/d7cef656f6d993bc17657486ba5b6b46.gif
when editing a row - to display the value of the field displayfield from storeServer
now displays dataindex from store
Ext.define('ModelLib', {
extend: 'Ext.data.Model',
fields: [
'trID',
'trName'
]
});
var storeServer = Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'ModelLib',
proxy: {
type: 'ajax',
api: {
read: '/api.php?lib=server&act=get'
},
reader: {
type: 'json',
root: 'fields',
idProperty: "trID"
}
},
sorters: [{
property: 'trID',
direction: 'ASC'
}]
});
storeServer.load();
Ext.define('ModelMainobjects', {
extend: 'Ext.data.Model',
fields: [
{name: 'trServerID', type: 'int'}
]
});
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoSync : true,
model: 'ModelMainobjects',
proxy: {
type: 'ajax',
api: {
read: '/api.php?lib=mainobjects&act=get',
update: '/api.php?lib=mainobjects&act=update'
},
reader: {
type: 'json',
root: 'fields',
idProperty: "trID"
},
writer: {
type: 'json'
}
},
sorters: [{
property: 'trID',
direction: 'ASC'
}]
});
store.load();
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var rowRenderer = function(val) {
var rec = storeServer.findRecord('id', val);
return rec !== null ? rec.get("trName") : ''
};
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
header: 'Сервер',
dataIndex: 'trServerID',
renderer: rowRenderer,
editor: {
xtype: 'combobox',
store: storeServer,
queryMode: 'local',
displayField: 'trName',
valueField: 'trID'
}
}],
width: 600,
height: 400,
plugins: [rowEditing]
});
I am trying to add rows to my grid.
I saw an example in the docs:
onAddRouteClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
buying_vendor_id: 12,
country_code: '1',
route: 0
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
But i cant seem to make it work in my code.
This is my grid:
onBtnRoutesSearchClick: function(button, e, options){
var me = this;
var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});
var newTab = Ext.create('Ext.panel.Panel', {
id: 'routes_pannel',
title: 'Routes',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonResetBid',
icon: 'images/Plus.png',
text: 'Add Row',
listeners: {
click: {
fn: me.onAddRouteClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'routes_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
{name: 'country_code', type: 'int', sortType: 'asInt'},
{name: 'route', type: 'int', sortType: 'asInt'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'buying_vendor_id',
width: 100,
text: 'Buying Vendor'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
width: 100,
text: 'Country Code'
},
{
xtype: 'gridcolumn',
dataIndex: 'route',
width: 80,
text: 'Route'
}
],
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.add(newTab).show();
}
Any ideas?
1.Create your model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'ProductID'},
{name: 'ProductName'},
{name: 'UnitPrice'},
{name: 'UnitsInStock'}
]
});
2.create your rowEditing
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {edit: function (editor, e) { }); }
});
3.get Store and create your grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
plugins: [rEditor],
title: 'Products',
columns: [ ],
dockedItems: [ {
xtype: 'toolbar',
dock: 'top',
items: [ {
xtype: 'button',
text: 'Yeni',
listeners: {
click: {
fn: function () { store.insert(0, new Product()); rEditor.startEdit(0, 0); }
}
}
} ]
} ],
width: 450,
renderTo: Ext.getElementById('hede')
});
I am trying to add rows to my grid.
I saw an example in the docs:
onAddRouteClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
buying_vendor_id: 12,
country_code: '1',
route: 0
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
}
But i cant seem to make it work in my code.
This is my grid:
onBtnRoutesSearchClick: function(button, e, options){
var me = this;
var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});
var newTab = Ext.create('Ext.panel.Panel', {
id: 'routes_pannel',
title: 'Routes',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonResetBid',
icon: 'images/Plus.png',
text: 'Add Row',
listeners: {
click: {
fn: me.onAddRouteClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'routes_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
{name: 'country_code', type: 'int', sortType: 'asInt'},
{name: 'route', type: 'int', sortType: 'asInt'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'buying_vendor_id',
width: 100,
text: 'Buying Vendor'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
width: 100,
text: 'Country Code'
},
{
xtype: 'gridcolumn',
dataIndex: 'route',
width: 80,
text: 'Route'
}
],
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.add(newTab).show();
1.Create your model
Ext.define('Product', {
extend: 'Ext.data.Model',
fields:
[
{ name: 'ProductID' },
{ name: 'ProductName' },
{ name: 'UnitPrice' },
{ name: 'UnitsInStock' }
]
});
2.create your rowEditing
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners:
{
edit: function (editor, e) { });
}
});
3.get Store and create your grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
plugins: [rEditor],
title: 'Products',
columns:
[
],
dockedItems:
[
{
xtype: 'toolbar',
dock: 'top',
items:
[
{
xtype: 'button',
text: 'Yeni',
listeners:
{
click:
{
fn: function () {
store.insert(0, new Product());
rEditor.startEdit(0, 0);
}
}
}
}
]
}
],
width: 450,
renderTo: Ext.getElementById('hede')
});
So you are trying to add a record to store right?
OK, lets look at the Store API
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-add
Sample usage:
myStore.add({some: 'data'}, {some: 'other data'});
The best practice is to also create a Model class . Read the component guides on grid and the data package .