EXT-grid FAQ: Grid

From (http://www.extjs.com/forum/showthread.php? T = 27784)
EXT-grid FAQ: Grid

Grid FAQ:

1. The grid data is empty.
2. the grid cannot display the image correctly.
3. Incorrect sorting
4. tabpanels includes Grid
5. Link in the grid cell
6. Merge Fields
7. Customize the appearance and behavior of row or column
8. Add a click event to the grid cell.
9. After the store calls load, the store is still empty.
10. The grid size varies with the window size.
11. Update the grid cell (actually: Store)
12. Reload the grid from different URLs.
13. xml Problems
14. When it should be empty, the grid retains the record
15. debugging of JSON Reader
16. Drag or reload a record.
17. horizontal scroll bar
18, fixed or not fixed column width
19. Hide a column
20. fixed width of the grid column to wrap the content in Cells
21. Add a column
22. The elements in the toolbar are centered.
23. Delete the selected row.
24, by PAGE, total number of records
25. Obtain the record through the row index of the grid.
26. The grid loads data from different servers or stores.
27. Automatic column size
28. disable a row
29. Differences between contentel, applyto and renderto
30, error data, red flag display
31. Editor grid-ComboBox display
32. display the border
33. Delete the scroll bar on the right of the grid.
34. Use footer for Grid
35. Copy the cell content from the grid.
36. comboboxes in Grid
37. Custom grid styles

The specific solution is as follows:

1. the grid is empty.

Grid does not display data
Store does not load data
Grid is empty
Grid is not executed
Grid does not listen to store
Possible causes

(1) Whether to define the grid height, height, autoheight, or layout: One of the 'fit 'containers

JS Code
Grid = new Ext. Grid. editorgridpanel {(
// Other configs
// Do not forget to specify the height
// Three options: (1) the specified height displayed; (2) the autoheight (3) puts the grid into a container with the layout: Fit
// Autoheight: True // autoheight redefines the height to display all records
// -- Or --
// Height: 350
)}

Grid = new Ext. Grid. editorgridpanel {(
// Other configs
// Do not forget to specify the height
// Three options: (1) the specified height displayed; (2) the autoheight (3) puts the grid into a container with the layout: Fit
// Autoheight: True // autoheight redefines the height to display all records
// -- Or --
// Height: 350
)} (2). Is store loaded? Call method store. Load ()

(3) Whether to render grid. render a grid uses the following one:

Use renderto or el auto render in grid configuration
Display call render () method, grid. Render ()
(4) Whether the render element exists.

(5) If you put a grid in a tab panel, add layoutontabchange: true in the tabpanel configuration.

(6). If JSON is used,

JSON format (you can verify your JSON response on www.jslint.com)
Make sure it is not a string (JSON = Object)
Do not use periods (.) In Field Names ("filed. c" ext will not be translated)
Make sure that the JSON structure is consistent with that of the render (the record array is under the root node, and so on)
(7) Whether the render specifies a correct root, which is used in JSON

Check the following sample response from jsonreader. If you set a root to wrap the array in the JSON response, it may be as follows:
JS Code
{'Results': 2, 'rows ': [{"codigoproduto": "3009", "tipoproduto": "Fert ",
"Descricaoproduto": "7 UP Reg. 12 GR, 50 pet ",
"Unidademedidaproduto": "tab", "Sabor": "V-REGULAR ",
"Codigomarca": "35", "produtopesobruto": "19.448 ",
"Produtopesoliquido": "18.760", "produtopesoum": "kg ",
"Produtovolume": "18.000", "produtovolumeum": "L ",
"Produtoum_pal": "36", "eliminar": ""}]
}

{'Results': 2, 'rows ': [{"codigoproduto": "3009", "tipoproduto": "Fert ",
"Descricaoproduto": "7 UP Reg. 12 GR, 50 pet ",
"Unidademedidaproduto": "tab", "Sabor": "V-REGULAR ",
"Codigomarca": "35", "produtopesobruto": "19.448 ",
"Produtopesoliquido": "18.760", "produtopesoum": "kg ",
"Produtovolume": "18.000", "produtovolumeum": "L ",
"Produtoum_pal": "36", "eliminar": ""}]
} (8). Make sure that the data of a record is one of the arrays.

Java code
VaR securityitemrecord = ext. Data. Record. Create ([{Name: 'type'}, {Name: 'itemname'}]); // OK
VaR securityitemrecord = ext. Data. Record. Create ({Name: 'type'}, {Name: 'itemname'}); // no good

VaR securityitemrecord = ext. Data. Record. Create ([{Name: 'type'}, {Name: 'itemname'}]); // OK
VaR securityitemrecord = ext. Data. Record. Create ({Name: 'type'}, {Name: 'itemname'}); // no good attempts to use firebug for the following operations

(I) Does firebug display errors?

(Ii) whether the request is sent (view console)

(Iii) Whether the request receives a response. If yes, copy the result to www.jslint.com to verify the format, whether the response is the result you want, and check the total number of records and the root directory of the array, and so on.

Store load? Add a listener to monitor whether the store is loaded or has an exception (how to add a listener? )

Store 'datachanged', 'load', 'loadexception ',

Proxy 'load'/'loadexception'

You can also add an Ajax listener.

2. the grid cannot display images normally (checkboxes, etc)

(1) is the CSS file connection correct?

(2) check whether the CSS Reference is correct and the relative path.

3. sorting problems

(1). Check the store configuration (sortinfo and sort type) or use setdefaultsort ();

Java code
Sortinfo: {field: 'fieldname', ction: 'asc '}
// Or call:
Store. setdefaultsort ('fieldname', 'asc ');

Sortinfo: {field: 'fieldname', ction: 'asc '}
// Or call:
Store. setdefaultsort ('fieldname', 'asc ');
(2) Check whether sort type is set

(3) If you only sort the current page and sort the entire dB query, set remotesort to true (remotesort is sorted locally by default)

(4). column sorting

Column data

HTML code
// Current sorting
+-+ ------- +
| 1 | first |
| 2 | last |
| 3 | second |
+-+ ------- +

// Desired sorting
+-+ ------- +
| 1 | first |
| 3 | second |
| 2 | last |

// Current sorting
+-+ ------- +
| 1 | first |
| 2 | last |
| 3 | second |
+-+ ------- +

// Desired sorting
+-+ ------- +
| 1 | first |
| 3 | second |
| 2 | last |
Defined in record

JS Code
Sorttype: function (value)
{
Switch (value. tolowercase ())
{
Case 'first': return 1;
Case 'second': return 2;
Default: return 3;
}
}

Sorttype: function (value)
{
Switch (value. tolowercase ())
{
Case 'first': return 1;
Case 'second': return 2;
Default: return 3;
}
}

4. Grid in tab panels

(1). Like other panels, you can directly add a gridpanle as an item.

(2) Make sure that the grid panel is a tab panel

(3). Set layoutontabchange In the tab panel.

JS Code
// Grid Object
VaR G = new Ext. Grid. gridpanel (
Title: 'I will be the tab label ';
)

VaR tabs2 = new Ext. tabpanel ({
Renderto: Document. Body,
Activetab: 0,
Widht: '000000'
Height: 150,
Frame: True,
Defaults: {autoscroll: true },
Items: [0] // Grid Object
})

// Grid Object
VaR G = new Ext. Grid. gridpanel (
Title: 'I will be the tab label ';
)

VaR tabs2 = new Ext. tabpanel ({
Renderto: Document. Body,
Activetab: 0,
Widht: '000000'
Height: 150,
Frame: True,
Defaults: {autoscroll: true },
Items: [0] // Grid Object
})
(4). Example: http://examples.extjs.eu /? Ex = gridintab

5. Links in the grid cell

(1). Customize a Renderer, or

(2). Use the rowselect event of Ext. Grid. rowselectionmodel as follows:

JS Code
Function handlerowselect (selectionmodel, rowindex, selectedrecord ){
// Assume that the record contains a URL Field
VaR url = selectedrecord. Get ('url ');
// If you want to open another window
Window. Open (URL );
}

Grid. getselectionmodel (). On ('rowselect', handlerowselect );

Function handlerowselect (selectionmodel, rowindex, selectedrecord ){
// Assume that the record contains a URL Field
VaR url = selectedrecord. Get ('url ');
// If you want to open another window
Window. Open (URL );
}

Grid. getselectionmodel (). On ('rowselect', handlerowselect );

6. Merge fields into one column

(1). Two or more fields in the connection record)

JS Code
VaR reader = new Ext. Data. arrayreader ({},[
// Merge into one
{Name: 'full _ name', type: 'string', mapping: 'First _ name + "" + obj. last_name '},
{Name: 'age '}
]);

VaR grid = new Ext. Grid. gridpanel ({
Store: New Ext. Data. Store ({
Render: reader,
Data: Ext. Grid. dummydata
}),
Columns :[
{Header: 'full name', dataindex: 'full _ name '},
{Header: 'age', dataindex: 'age '}
]
})

VaR reader = new Ext. Data. arrayreader ({},[
// Merge into one
{Name: 'full _ name', type: 'string', mapping: 'First _ name + "" + obj. last_name '},
{Name: 'age '}
]);

VaR grid = new Ext. Grid. gridpanel ({
Store: New Ext. Data. Store ({
Render: reader,
Data: Ext. Grid. dummydata
}),
Columns :[
{Header: 'full name', dataindex: 'full _ name '},
{Header: 'age', dataindex: 'age '}
]
}) (2). You can create any fields you need.