Develop Reference

EXT JS 2.3; Internet Explorer 8; GridPanel Records Wrap, but Shouldn't

I'm using EXT JS 2.3 and looking at an issue that occurs with Internet Explorer 8. If you take a look at the company column in an example on this page, It is cutting off the lines that are too long such as E.I. du Pont de Nemours and Co... (just an example, not using a simple array grid; just a normal GridPanel)
That is the correct behavior I would like, which is what happens in Firefox, and later versions of Internet Explorer.
However, in Internet Explorer 8 the row is actually wrapping to take up two rows, with the last bit in the second row.
I looked in documentation for 2.3, but not finding any config options that seem to help. I tried setting autoHeight to false, but no effect. Most other questions I find are the reverse, where they want it to wrap but it doesn't.
How can I keep Internet Explorer 8 from wrapping?
Here is the javascript...
Column Model
var columnModel = new Ext.grid.ColumnModel([
{
dataIndex: 'Name',
id: 'fieldLabel',
width: parseInt(width)/4
},
{
dataIndex: 'Description',
id: 'fieldDataGrey',
width: parseInt(width)/4
}
]);
Grid Panel 1
var Grid1 = new Ext.grid.GridPanel({
id: 'Grid1',
name: 'Grid1',
store: DataStore1,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Grid Panel 2
var Grid2 = new Ext.grid.GridPanel({
id: 'Grid2',
name: 'Grid2',
store: DataStore2,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Field Set
var FieldSet = new Ext.form.FieldSet({
id: 'FieldSet',
name: 'FieldSet',
title: 'Title',
border: true,
width: width,
autoHeight: false,
labelWidth: 125,
bodyStyle: 'padding:2px; margin:0px',
style: 'padding:2px; margin:0px',
layout: 'tableform',
layoutConfig: {
columns: 2,
columnWidths:[.5, .5]
},
items: [
Grid1,
Grid2,
{
labelWidth: 125,
layout: 'form',
bodyStyle:'padding:2px 0px 0',
items: Label,//Didn't include label with posted code
colspan: 2
}
]
});

Try to use 2.2.1 ExtJs version, or 3.x. The problem I think lays in the Ext.js module in the Ext distribution, where browser versions are detected.

Ext.grid.ColumnModel has a config option called "renderer." I have used this function often for styling or DOM manipulation that Ext did not provide in the config options. You might try using the renderer function and returning an HTML string with custom styling that forces no wrapping on the data.
For instance,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var style = 'overflow:hidden; white-space: nowrap; width: 100px;',
html = '<span style="' + style + '">' + value + '</span>';
return html;
}
Where "width" (100px in this case) is the width you defined in your column.

After further testing I did not find the solution I hoped for, but I did partially fix it by using a renderer rather than the fieldDataGrey id and using a column layout rather than the tableform layout.

can't load json data into a grid extjs

I tryed every answer i found (in Stackoverflow there are many) to solve my problem with the store of extjs, but still the data doesn't get displayed in the grid, even if the grid is correctly fisplayed. I'm confused so I'm writing the "store" I was able to build reading the answer on this site. I don't know why it's not loading the data into the grid. If you need more information to help please ask.
store: Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'StoreName',
fields: ['id','name'],
data : JsonObject,
model: 'ModelName',
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'JsonRoot'
}
}
})
The grid is loaded in a new window through an ajax call. The code of the new window is the following:
Ext.create('Ext.window.Window', {
title: 'GridTitle',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [
{
text : 'id',
flex : 1,
sortable : true,
dataIndex: 'id'
},
{
text : 'name',
width : 300,
sortable : true,
dataIndex: 'name'
}],
I do have the impression that the part with the columns is not read by ext.js, cause it doesn't index the name and id of the data i'm passing to it in the json.

The solution was so simple that I'm embarrassed to say it.
reader: {
type: 'json',
root: 'jsonRoot'
}
Instead of:
reader: {
type: 'json',
record: 'jsonRoot'
}

how to apply navigation in extjs grid

I want to load only 25 rows at a time in grid. After clicking next button next 25 rows should be added. Data in grid is in json format and it is from servlet. I am getting json data from servlet. But i want to load particular part only. How can implement please help me.
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
'sno',
'name', 'salary'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
//url: 'http://localhost:8080/sampleweb/AccessServlet',
url: 'http://localhost:8080/sampleweb/DataServlet',
// the return will be XML, so lets set up a reader
reader: {
type: 'json',
root:'jsonObj'
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "sno",width:140, dataIndex: 'sno', sortable: true
,editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}},
{text: "name", width: 180, dataIndex: 'name', sortable: true,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
]}},
{text: "salary", width: 180, dataIndex: 'salary', sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 1000000
}},
{
xtype: 'actioncolumn',
width: 30,
sortable: true,
menuDisabled: true,
items: [{
icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}
],
renderTo:'example-grid',
width: 560,
plugins: [rowEditing],
height: 400
});
});

You need pagination, take a look at the example provided by Sencha. Basically, all you have to do on the front-end is to add and configure one paging toolbar and the framework takes care about the rest. The real job is on the server side where your servlet will have to parse start and limit parameters, include them in queries and return the appropriate data. This is an example of the request generated by ExtJS once you correctly incorporated paging toolbar:
{
//your request data
..
start: 0,
limit: 25
}
This request will fetch first 25 rows. Of course you can configure the number of rows in your application.

You just have to add
limitParam : 10,
pageParam :'pageNumber',
in the proxy attribute of store. If you want to load a specific page use
grid.getStore().currentPage = The Page Number You Want To Load;
before loading the store.

sencha touch ListPaging plugin "load more" button position issue

I'm facing an issue regarding the position of the Load More... button in sencha touch2. Here, the Load More button is added using ListPaging plugin and from the Ext.plugins.Listpaging docs it states:
Adds a Load More button at the bottom of the list. When the user
presses this button, the next page of data will be loaded into the
store and appended to the List.
But, here, the list item with load more button appears at the top of the list, not to the bottom.
See my code here:
Ext.define('MyApp.view.MyLIst', {
extend : 'Ext.dataview.List',
xtype : 'mylist',
id : 'myList' ,
requires : [Ext.data.Store','Ext.plugin.ListPaging'],
config : {
width : '100%',
height : '100%',
loadingText : 'Loading data...',
emptyText : 'No Members',
itemTpl : '<div class="mylisttitle">{title}</div>',
store : 'mylistStore',
plugins : [
{
xclass : 'Ext.plugin.ListPaging',
autoPaging : false,
loadNextPage: function() {
console.log('Load more button clicked');
// fire event here
}
}],
masked : false,
mode : 'SINGLE',
scrollable : {
direction : 'vertical',
directionLock : true
}
}
});
and see the result below:
Any idea how could I show the same button at the bottom of the list?
Thanks
EDIT: I had posted the issue in senchatouch forum to, still awaiting a solution, you can see it here

Kind of strange. Can you try removing these properties (width, height and scrollable) and adding "layout:fit" to the parent of this list.

If you have any custom css try disabling it. Or if you are able to reproduce the same issue in a fiddle it would be more easier to fix. Here is a work demo jsfiddle.net/blessenm/9ypwk
Ext.application({
launch: function () {
Ext.define('TweetStore', {
extend: 'Ext.data.Store',
config: {
fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
pageSize: 25,
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json',
pageParam: 'page',
limitParam: 'rpp',
extraParams: {
q: 'sencha'
},
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
Ext.define('MyApp.list.List', {
extend: 'Ext.List',
config: {
useSimpleItems: false,
variableHeights: true,
infinite: true,
disableSelection: true,
allowDeselect: false,
store: Ext.create('TweetStore'),
loadingText: 'Loading data...',
emptyText: 'No Members',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{text}</div>'),
masked: false,
mode: 'SINGLE',
scrollable: {
direction: 'vertical',
directionLock: true
}
}
});
Ext.define('MyApp.list.Container', {
extend: 'Ext.Container',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Load More Plugin',
}, {
xclass: 'MyApp.list.List',
flex: 1
}]
}
});
Ext.create('MyApp.list.Container');
}
});

Solved it:
I was missing this : infinite: true
Load more button now appears at the bottom .
Thanks #blessenm for the working Demo :-)

Reordering rows within a grid Ext JS 4

I want to be able to reorder the rows within a single grid. Im relatively new to extjs and have tried searching for this but all the resources i find are for older ext js versions and some of properties defined in those aren't valid anymore. eg- http://www.vinylfox.com/getting-started-with-grid-drag-drop/
xtype: 'grid',
id: 'row-grid',
hideHeaders: true,
store: 'SelectedRowStore',
//enableDragDrop: true,
//ddGroup: 'rowgrid-dd',
columns: [
{
header: 'Rows',
flex: 1,
sortable: false,
dataIndex: 'DisplayName'
},
{
id: 'button-column',
dataIndex: 'ID',
sortable: true,
hideable: false,
width: 35,
renderer: PA.common.RendererHelper.renderButtonForAddRowMainGrid
}
]
I'd really appreciate any help/advice on this issue.

Take a look at the grid to grid drag-n-drop example. It works with two grids, but I'm sure it can be easily modified to allow rearranging rows within one grid.

You can follow the sencha sample as Rene said or follow this:
Add this to your grid:
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
containerScroll: true,
dragGroup: 'someuniquenameforyourgrid',
dropGroup: 'someuniquenameforyourgrid'
},
},
And, only if you need some listener to do some anction, add (inside viewConfig):
listeners: {
drop: 'onDropGrid'
}
and event handler code in your controller:
onDropGrid: function (node, data, dropRec, dropPosition) {
...
}