I have a two GridPanel namely: 'grid1' and 'grid' under my mainPanel. Now, whenever I clicked or select a data in my 'grid1' panel, I want that data to appear also in my 'grid' panel and that is my problem.
This is what I've tried so far:
var grid1 = new Ext.grid.EditorGridPanel({
id: 'editorgrid',
store: store1,
title: 'Animals',
cm: cm1,
width: 400,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 1,
tbar: [
'Animals Unit : ', '-',
{
xtype: 'combo',
name: 'animal_combo',
id:'cboAnimal',
anchor: '90%',
allowBlank: false,
editable: false,
forceSelection: true,
triggerAction: 'all',
mode: 'remote',
store: new Ext.data.JsonStore({
url: '/index.php/getAnimalCombo',
root: 'data',
totalProperty: 'total',
fields: ['id','desc'],
params: {start: 0},
baseParams: {limit: 25}
}),
pageSize: 25,
displayField: 'desc',
valueField: 'id',
minListWidth: 150,
valueNotFoundText: '',
width: 150,
minChars: 1
},
'-',
],
bbar: pager1
});
Ext.getCmp('cboAnimal').addListener('select', function(combo, record, index){
grid1.getStore().baseParams['animal_id'] = record.get('id');
grid1.getStore().load();
});
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '/index.php/getContent'
}),
root: 'data',
pruneModifiedRecords: true,
totalProperty: 'total',
baseParams: {limit: 25},
autoLoad: {params: {start: 0}},
fields: ['id','animals'],
sortInfo: {field:'id', direction:'ASC'}
});
var grid = new Ext.grid.EditorGridPanel({
id: 'maingrid',
store: store,
cm: cm,
width: 785.5,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 1,
bbar: pager
});
Try this and let me know the result...
// instead of baseParam try to use extraParams
grid1.getStore().proxy.extraParams = {'animal_id': record.get('id')}
Also, please write the error message or what you getting!
Related
I have a basic gridpanel that is fed from a store with 600 records, but my paging toolbar only shows the first page, regardless of the pageSize config in the store. For example...
When pageSize = 50, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 50 of 50
When pageSize = 100, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 100 of 100
Thoughts? Source below.
employee_store.js
var empUrlRoot = 'http://extjsinaction.com/crud.php'
+ '?model=Employee&method=';
//Instantiate employee store
var employeeStore = Ext.create('Ext.data.Store', {
model: 'Employee',
pageSize: 50,
proxy: {
type: 'jsonp',
api: {
create: empUrlRoot + 'CREATE',
read: empUrlRoot + 'READ',
udpate: empUrlRoot + 'UPDATE',
destroy: empUrlRoot + 'DESTROY'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: true,
batch: false,
writeRecords: function(request, data){
request.jsonData = data;
return request;
}
}
}
});
gridpanel.js
Ext.onReady(function(){
// gridpanel column configurations
var columns = [
{
xtype: 'templatecolumn',
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 50,
resizable: false,
hidden: true,
// template renders id column blue:
tpl: '<span style="color: #0000FF;">{id}</span>'
},
{
header: 'Last Name',
dataIndex: 'lastName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'First Name',
dataIndex: 'firstName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'Address',
dataIndex: 'street',
sortable: false,
flex: 1,
// template renders column with additional content:
tpl: '{street}<br />{city} {state}, {zip}'
}
];
// Configure the gridpanel paging toolbar
var pagingtoolbar = {
xtype: 'pagingtoolbar',
store: employeeStore,
dock: 'bottom',
displayInfo: true
};
// Create gridpanel
var grid = Ext.create('Ext.grid.Panel', {
xtype: 'grid',
columns: columns,
store: employeeStore,
loadMask: true,
selType: 'rowmodel',
singleSelect: true,
stripeRows: true,
dockedItems: [
pagingtoolbar
]
});
// Configure and create container for gridpanel
Ext.create('Ext.Window', {
height: 350,
width: 550,
border: false,
layout: 'fit',
items: grid //the gridpanel
}).show();
// Load the employeeStore
employeeStore.load();
});
employee_model.js
// Define employee model
Ext.define('Employee', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id',type: 'int'},
{name: 'departmentId', type: 'int' },
{name:'dateHired', type:'date', format:'Y-m-d'},
{name:'dateFired', type:'date', format:'Y-m-d'},
{name:'dob', type:'date', format: 'Y-m-d'},
'firstName',
'lastName',
'title',
'street',
'city',
'state',
'zip'
]
});
You have to return total record count.
reader: {
root : 'data',
totalProperty: 'total' // this is default, you can change it
}
Next in server response you need:
{
data : ['your data here'],
total : 2000
}
I have made a webapp with extjs 3.4.
I have a grid that I want to group with field street but I can't.
My code is here:
var store_intervencoes = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root:'rows',
autoLoad: false,
type : 'ajax',
//remoteGroup: false,
groupField: 'street',
fields:[{ name:'street', type:'integer'},
{ name:'intervenction', type:'string'},
{ name:'priority', type:'integer'},
{ name:'value', type:'string'}]
})
});
var gridPanel = new Ext.grid.GridPanel({
header: false,
store: store_intervencoes,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
layout: 'fit',
height: 300,
width: 1000,
columnLines: true,
cls: 'grid_intervencoes',
autoScroll: true,
stripeRows: true,
autoFill : true,
viewConfig: { emptyText: 'nothing', deferEmptyText: false },
groupField: 'street',
view: new Ext.grid.GroupingView({
forceFit:true,
autoHeight: true,
autoFill : true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "fk_n_rua"]})'
}),
columns: [{
//header: "Nome",
//sortable: true,
dataIndex: "intervenction",
//width: 450
},{
//header: "Prioridade",
//sortable: true,
dataIndex: "priority",
//width: 50
},{
//header: "Custo" + ' \u20AC',
//sortable: true,
dataIndex: "value",
//width: 50
},{
//header: 'Trecho',
//sortable: true,
dataIndex: "street",
//width: 50,
//groupable: true
}],
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : [{
xtype: 'numberfield',
id: 'total',
name: 'total',
fieldLabel: 'Total',
value: '0',
readOnly: true,
fieldCls: 'valores'
}]
});
I think I have all the code like this example:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grouping.html
I don't know why the grid doesn't group. I get all the data from a database with ajax and php that generate json. All fields shows up. The unique problem is the non grouping. I also get no errors.
Anyone could help me with that?
function open() {
var req_spec_store = new Ext.data.SimpleStore({
url: 'mngr_req_ajx.php',
fields: ['value', 'text'],
data: [
['Android', 'Android'],
['iPhone', 'iPhone'],
['iPhone2', 'iPhone2'],
['iPhone3', 'iPhone3']
]
});
req_spec_store.load({
params: {
todo: 'Get_Req_Spec'
}
});
var menuWin = new Window('menuWindow', {
title: "Create Data",
width: 980,
height: 340,
draggable: true,
destroyOnClose: true,
hideEffect: Element.hide,
showEffect: Element.show,
minimizable: false,
maximizable: false,
closable: true,
resizable: false,
items: [new Ext.FormPanel({
renderTo: 'r_sp',
id: 'mngReqForm',
layout: 'form',
height: innerHeight - 250,
width: innerWidth - 50,
frame: true,
destroyOnClose: true,
defaults: {
msgTarget: 'side',
labelSeparator: ''
},
labelAlign: 'right',
items: [{
xtype: 'combo',
fieldLabel: 'Data Entry ',
store: req_spec_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Entry...',
triggerAction: 'all',
name: 'specId2',
id: 'specId2',
hiddenName: 'specIdHid',
width: 150,
forceSelection: false,
editable: false,
selectOnFocus: true
}]
})]
});
}
window is opened in on click of button. Inside window, there is form panel. Which is having one combo type element. I am calling PHP using ajax, getting data successfully when directly doing the stuff on Ext.onReady() but not in case of window opened.
The data of your store should be in JSON (also {} instead off []=
data : [ {value:'Android', text:'Android' }, ... ]
Before starting I am sorry with my english.. I don't speak it well ..
So I have a problem with the Combobox in ExtJS4 .. I tried to add a empty line in my combobox list but It's not ok .. i have the list with a empty line but when I trie to select it I can't.. so if someone can help me or have an example please
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: 'docbody',
title: ' ',
autoHeight: true,
width: 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items: [{
xtype: 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items: [{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus: true,
name: 'title',
displayField: 'name',
valueField: 'value',
tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [{
name: 'Mvr',
value: 'mr'
}, {
name: 'Mrs',
value: 'mrs'
}, {
name: 'Miss',
value: 'miss'
}],
listeners: {
'load': function (store, records, options) {
this.insert(0, '--');
}
}
})
}]
}]
});
});
Unless adding a record to your store will break something else in your program logic, I would suggest doing that and getting rid of the template.
Ext.require([
'Ext.form.',
'Ext.data.',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title : ' ',
autoHeight: true,
width : 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items : [
{
xtype : 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items : [
{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus : true,
name: 'title',
displayField: 'name',
valueField: 'value',
//tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
{name : 'Mrs', value: 'mrs'},
{name : 'Miss', value: 'miss'}
],
listeners :
{
'load' : function (store, records, options) {
store.add({name: '--', value: null});
}}
})
}
]
}
]
});
});
I'm working with ExtJS4 and trying to build a search feature using a form. I've got the form displayed and a user enters one of 4 criteria and clicks Search, the grid is then built and shows the results from a JSON call.
What I'm trying to achieve is to allow the user to be able to enter different search criteria and click Search again and have the grid updated to show the new results. In my first attempt the grid is rendered for each click of Search and in my second attempt it simply pushes the results of the search into the grid without removing the previous entries.
Here's my current setup:
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
{
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1
}, {
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'FOO',
multiSelect:true,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: Ext.get('results'),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
var form = this.up('form').getForm();
var store = new Ext.data.Store({
model: 'job',
pageSize: 10,
autoLoad: true,
remoteSort:true,
proxy: {
actionMethods: {
read: 'POST'
},
type: 'ajax',
fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '/search?'+ form.getValues(true),
reader:{
type: 'json',
root: 'results',
totalProperty: 'totalCount'},
}, //end proxy
sorters:[{
property:'version',
direction:'ASC'
}]
}).on('load', function(){
userGrid.reconfigure(this); // ???
});
} // end button handler
}] //end items
}] // end dockeditems
});
});
I've tried refreshing the grid and calling load() but I don't think I've hit yet on the right combination. I'd like the grid contents to be replaced with those from the latest ajax call to /search.
You should not create a new panel and a store on each search button click, so move it out of the button handler. If you just call load({params:{search:'whatever'}}) on the store of the grid when user pushes search button you will get the new data populated in your grid automatically. You don't need to reconfigure the grid or do anything else. Essentially the grid is bound to the store and when the store data changes the view behind the grid will automatically refresh.
I got this solved by following some of DmitryB's advice. I inherited this code and after some massaging I got it working as intended. Below is my final solution. In the handler function on the button you need to be sure and update the URL of the proxy defined in the store so that when you call store.load() it's correct.
Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
//'extjs.SlidingPager'
]);
/*Setup Data Model*/
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = new Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'none'
},
items: [{
xtype: 'textfield',
name: 'jobnumber',
fieldLabel: 'Job Number',
allowBlank: true,
minLength: 7,
maxLength: 7
}, {
xtype: 'textfield',
name: 'accountnumber',
fieldLabel: 'Account Number',
allowBlank: true,
minLength: 6,
maxLength: 7
}, {
xtype: 'textfield',
name: 'customername',
fieldLabel: 'Customer Name',
allowBlank: true,
}, {
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
store.proxy.url = '/search?' + formPanel.getForm().getValues(true)
store.load();
} // end button handler
}] //end items
}] // end dockeditems
});
var store = new Ext.data.Store({
model:'job',
pageSize:10,
autoLoad: false,
remoteSort:true,
proxy:{
type:'ajax',
fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '',
reader:{
totalProperty:'totalCount',
type: 'json',
root: 'results'
},
actionMethods: 'POST'
},
sorters:[{
property:'version',
direction:'ASC'
}]
});
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'userGrid',
multiSelect: false,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: 'results',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
});