I have a grid in my application that is configured with xtype : 'pagingtoolbar' and the store that related to this grid is configured with pageSize : 10, the result is that the pagingtoolbar is correctly dispayed (like following) but I have a scroller in the grid and all records are loaded in the grid. surely I'm missing sth in grid/store config :
Grid :
xtype : 'gridpanel',
store : mystore,
height : 350,
hidden : true,
columns : [ {
dataIndex : 'firstName',
text : 'First Name',
flex : 1
},{
dataIndex : 'lastName',
text : 'Last Name',
flex : 1
},{
dataIndex : 'email',
text : 'Email',
flex : 1
}],
dockedItems : [ {
xtype : 'pagingtoolbar',
hight : 28,
displayInfo : true,
dock : 'bottom'
} ]
Store :
Ext.define('Users',{
extend: 'Ext.data.Store',
model: usersModel,
pageSize : 10,
proxy: {
type: 'ajax',
url: 'servletURL',
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type : 'json',
root: 'data'
},
actionMethods: {
read : 'POST',
create : 'POST',
update : 'POST',
destroy: 'POST'
},
},
sortOnLoad: true,
sorters: { property: 'dateTimeTrx', direction : 'DESC' },
});
I'm correctly receiving data from server side, but I can't display pages, all data is in one page even that the pagingtoolbar is correctly displayed as shown above, Any help in that? Thanks!
ExtJs pagingtoolbar is not responsible for extracting needed data from server response. Instead, your server has to response with exactly that data that should be displayed for the current page. In order to tell server what data is needed ExtJs would send additional params (something like ?start=0&page=1&limit=10). You have to form the response accordingly to this params.
Related
I am trying to submit the values from the menu buttons but know this is not possible and that I have to create a hidden field and store the button values there.
Being new to ExtJs I can not seem to figure out how to do this. Below is the basic layout I used to check the button shows and I can choose a colour.
getFormItems : function() {
var me = this;
return [{
xtype : "fieldset",
title : "Items to monitor",
defaults : {
labelSeparator : ""
},
items : [{
xtype : "checkbox",
name : "cpuenable",
boxLabel : _("Will monitor CPU Temperature"),
fieldLabel : _("CPU Temperature"),
checked : false
},{
xtype : 'hiddenfield',
id : 'buttonvalues'
},{
xtype : "button",
name : "colours",
text : _("Choose Colours"),
scope : this,
style : {
marginTop : "10px",
marginBottom : "10px"
},
menu: [{
text: "Main CPU Colour",
menu: {
xtype : "colormenu",
name : "colourc",
value : "000000",
cls : "menubutton-class",
handler: function (obj, rgb) {
var colourmField = this.findField('colourc');
colourmField.setValue(rgb.toString());
alert(colourmField.getValue());
}
}
},{ and so on
Okay, here is an edit for you of my previous post. I give you an example how to fetch all child components you want inside a component:
Example extjs:
{
xtype: 'fieldset',
id: 'fsButtons',
items: [
{
xtype: 'hiddenfield',
id: 'hiddenValues'
},
{
xtype: 'button'
color: '000000'
},
{
xtype: 'button'
color: '555555'
}
]
}
Function to fill the hiddenfield:
function getButtonVars() {
var buttonVars = new Array();
//Get all components with xtype 'button' inside the fieldset with id 'fsButtons'
Ext.Array.each(Ext.ComponentQuery.query('button', Ext.getCmp('fsButtons'), function(button){
buttonVars.push(button.color);
});
Ext.getCmp('hiddenValues').setValue(buttonVars.join(',')); // concats all button values to one string: '000000,555555' etc.
}
I hope it's clear now :)
http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery
I am converting my application to use Server Side Paging with the Kendo Grid UI. Prior to switching serverPaging to true, I was properly displaying my grid contents, and paging on the client side. However, once I turned on the serverPaging, my data was no longer visible. I have checked the network call, and my data is returning (only 2 records of 8 total) as expected, but I am not seeing it in the grid.
Here is the grid construction:
$v.KendoGrid.makeGrid(gridName, {
columns: [
{ field: 'IdentifierCode', title: 'User Name' },
{ field: 'CompanyName', title: 'Company' },
{ field: 'Email', title: 'Email' }
],
dataSource: {
pageSize: 2,
schema: {
data: 'Data', // records are returned in the data section of the response
model: {
id: 'Id',
fields: {
IdentifierCode: { type: 'string' },
CompanyName: { type: 'string' },
Email: { type: 'string' }
}
},
total: 'Total' // total number of records are in the total section of the response
},
serverPaging: true,
transport: {
read: {
url: window.urlConfigs.root + "Security/UserAccount/PagedListing"
dataType: "json",
type: "GET"
}
}
},
editable: false,
filterable: true,
height: 464,
pageable: true,
scrollable: true,
sortable: true
});
Here is the MVC Controller method:
public ActionResult PagedListing(int pageSize, int skip)
{
var entities = ReadRepo.All();
var total = entities.Count();
var data = entities.Skip(skip).Take(pageSize).Select(MapEntityToViewModel).ToList();
return Json(new { Total = total, Data = data }, JsonRequestBehavior.AllowGet);
}
And here is the data I get back on the network call:
{"Total":8,"Data":[{"Id":"928f0bb2-608b-417b-bf6e-e5c58f85fec2","IdentifierCode":"admin","FirstName":"Administrator","MiddleName":"of","MiddleNameHuman":"of","LastName":"GasStream","DisplayName":"Administrator of GasStream","Email":"admin#example.com","IsExternal":false,"UserTypeHuman":"Internal","CompanyId":"75bb05a4-1ec2-4042-aeba-a229008aca9f","CompanyName":"Entessa Pipeline & Terminal, MLP","CompanyIdentifierCode":"SHA","Password":"wFg/a/NEU6WM8z4YZBUduitIDROfeFz/+Za6leAHnBE=","PasswordChanged":false,"ForceNewPasswordFlag":false,"Settings":[],"RoleGroups":[]},{"Id":"47c29025-cfa8-4447-9ab7-a229008ad088","IdentifierCode":"contractcarl","FirstName":"Carl","MiddleName":null,"MiddleNameHuman":"","LastName":"Smithers","DisplayName":"Carl Smithers","Email":"carl#entessa.com","IsExternal":false,"UserTypeHuman":"Internal","CompanyId":"75bb05a4-1ec2-4042-aeba-a229008aca9f","CompanyName":"Entessa Pipeline & Terminal, MLP","CompanyIdentifierCode":"SHA","Password":"IWdH+qDIOucNrre6V4AgI6Exm2Vq5qkIdXdsWfP6jn4=","PasswordChanged":false,"ForceNewPasswordFlag":false,"Settings":[],"RoleGroups":[]}]}
I suspect I have missed something small, but after looking at this and trying all sorts of possible work-arounds, I cannot see it, so I am asking for some help. I thought once I got the data to return small sets from the Server, things would get simpler.
Thanks in advance,
Drew
I ended up finding the answer. the $v.KendoGrid was a method that wrapped the kendoGrid call itself, and in there something was getting reset to not allow the data to be parsed properly when it came back from the server properly paged.
I have since re-worked the mess so I can establish the necessary parameters in the $v.KendoGrid call for just my type of grid.
Thanks for the help, and the eyes to catch the comma, Brett.
Drew
I want to use jtable in jquery UI dialogue widget. I'm loading the content of dialogue widget dynamically as follows
$( "#dialog4" ).dialog({
autoOpen: false,
height:$(window).height() - 50,
width:$(window).width() - 50,
show: {
effect: "blind",
duration: 400,
},
hide: {
effect: "explode",
duration: 400
},
open: function (){
$(this).load("managegroupmembers.jsp");
}
});
my jtable code is present in managegroupmembers.jsp. It is as follows:
<script>
$(function() {
$('groupmembers')
.jtable(
{
title : 'Members in Group',
jqueryuiTheme : true,
selecting : true, //Enable selecting
multiselect : true, //Allow multiple selecting
selectingCheckboxes : true,
paging : true,
pageSize : 20,
pageSizes : [ 20, 50, 75, 100, 200, 500 ],
defaultSorting : 'fullName ASC',
sorting : true,
actions : {
listAction : 'group'
},
fields : {
groupID : {
key : true,
list : false
},
memberID : {
key : true,
list : false
},
fullName : {
create : false,
edit : false,
title : 'Name',
width : '15%'
},
memberRole : {
title : 'Role in Group',
width : '7%',
display : function(data) {
var roleName = "";
if (data.record.memberRole != null) {
roleName = data.record.memberRole.roleName;
}
return roleName;
}
},
memberSince : {
list : true,
title : 'Member Since',
inputClass : 'text ui-widget-content ui-corner-all inputClass'
}
}
});
$('#groupmembers').jtable('load');
});
</script>
<div id="groupmembers" class="ui-widget"></div>
I tried to debug the code using chrome's developer tools and I'm seeing following error:
"cannot call methods on jtable prior to initialization; attempted to call method 'load'"
Can anybody help me here? Thanks in advance.
You are not initializing the jTable because you forgot the # in front of the groupmembers ID in the init code....
$('groupmembers')
should be:
$('#groupmembers')
When i use Ext.ux.touch.grid,an error happened?
"Cannot read property 'features' of undefined "
but it only happen when i use it like this,
this.testGrid = Ext.create('Geo.view.Grid');
in file application.js,a main controller file
config: {
refs: {
main: 'mainview',
worklist: 'worklist',
testGrid: 'testGrid'
},
this is testGrid view file
Ext.define('Geo.view.Grid', {
extend : 'Ext.ux.touch.grid.List',
xtype : 'testGrid',
requires : [
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Editable',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.field.Number',
'Geo.store.Grid'
],
config : {
title : 'Grid',
store : true,
columns : [
{
header : 'Text',
dataIndex : 'text',
width : '90%',
editor : {
xtype : 'textfield'
}
},
{
header : 'Amount',
dataIndex : 'amount',
width : '10%',
editor : {
xtype : 'numberfield'
}
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Editable',
launchFn : 'initialize'
}
]
},
applyStore : function() {
return new Geo.store.Grid();
}
});
When direct use it in main view file,it's Correct
items: [
{xtype: 'dashboards'},
{xtype: 'testGrid'}
]
Who know the reason? Thanks a lot
do you set your store to autoload: true, (?)
I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?
Can somebody help me?
The code looks like:
var selectedPersons = [
[1, 'Persnr', 'Name', 'Vorname']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'PrsOid', type: 'int'},
{name: 'PersonalNr'},
{name: 'Nachname'},
{name: 'Vorname'}
]
});
store.loadData(selectedPersons);
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
{
id : 'PersonalNr',
header : 'PersonalNr',
width : 100,
sortable : true,
dataIndex: 'PersonalNr'
},
{
header : 'Nachname',
width : 100,
sortable : true,
dataIndex: 'Nachname'
},
{
header : 'Vorname',
width : 100,
sortable : true,
dataIndex: 'Vorname'
}
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
height: 200,
//width: 460,
title: 'Personenauswahl',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
grid.render('gridSelectedPersons');
Do you mean something like a bottom bar ?
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
....
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
bbar: new Ext.Toolbar({
renderTo: document.body,
height: 30,
items: [
// begin using the right-justified button container
'->',
{
xtype:'button',
text:'The button',
//makes the button 24px high, there is also 'large' for this config
scale: 'medium'
}
]
})