Editable Grid
There is a simple javascript build with old js but u can use it in ext 2.0 right
1 var grid;
2 var ds;
3 // shorthand alias
4 // shorthand alias
5 var fm = Ext.form, Ed = Ext.grid.GridEditor;
6
7 ds = new Ext.data.Store({
8 proxy: new Ext.data.HttpProxy({url: '/admin/products/data'}),
9
10 reader: new Ext.data.JsonReader({
11 root: 'Products',
12 totalProperty: 'Total',
13 id: 'id'
14 }, [ {name: 'code'},
15 {name: 'category'},
16 {name: 'sub_categories'},
17 {name: 'name'},
18 {name: 'discount'},
19 {name: 'price'},
20 {name: 'quantity'},
21 {name: 'active'} ]),
22 // turn off remote sorting
23 remoteSort: false
24 });
25
26 function formatBoolean(value){
27 return value ? '<span style="color:green">Yes</span>' : '<span style="color:red">No</span>';
28 };
29
30 function formatQuantity(value){
31 if (value <= 5) {
32 return "<span style=\"color:red\">"+value+"</span>"
33 } else if (value > 5 && value < 10) {
34 return "<span style=\"color:orange\">"+value+"</span>"
35 } else if (value > 10){
36 return "<span style=\"color:green\">"+value+"</span>"
37 }
38 };
39
40 function formatPercentage(value){
41 return value + "%"
42 };
43
44 var cm = new Ext.grid.ColumnModel
45 ([{
46 id: 'code',
47 header: 'Code',
48 dataIndex: 'code',
49 width: 80
50 },{
51 id: 'category',
52 header: 'Category',
53 dataIndex: 'category',
54 width: 55
55 },{
56 id: 'sub_categories',
57 header: 'Sub Categories',
58 dataIndex: 'sub_categories',
59 width: 100
60 },{
61 id: 'name',
62 header: "Name",
63 dataIndex: 'name',
64 width: 250
65 },{
66 header: 'Discount',
67 dataIndex: 'discount',
68 width: 60,
69 renderer:formatPercentage,
70 editor: new Ed(new fm.NumberField({
71 allowBlank: false,
72 allowNegative: false,
73 allowDecimals: true
74 }))
75 },{
76 header: 'Price',
77 dataIndex: 'price',
78 width: 100,
79 renderer: Ext.util.Format.gbMoney,
80 editor: new Ed(new fm.NumberField({
81 allowBlank: false,
82 allowNegative: false,
83 allowDecimals: true
84 }))
85 },{
86 header: 'Quantity',
87 dataIndex: 'quantity',
88 width: 60,
89 renderer:formatQuantity,
90 editor: new Ed(new fm.NumberField({
91 allowBlank: false,
92 allowNegative: false,
93 allowDecimals: false
94 }))
95 },{
96 header: 'Active',
97 dataIndex: 'active',
98 width: 60,
99 renderer: formatBoolean,
100 editor: new Ed(new fm.Checkbox())
101 }]);
102
103 cm.defaultSortable = true;
104
105 grid = new Ext.grid.EditorGrid('products-ct', {
106 ds: ds,
107 cm: cm,
108 selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
109 autoExpandColumn: 'name',
110 clicksToEdit:1
111 });
112
113 var onAfterEditGrid = function(e) {
114 query = 'id='+e.record.id+'&product['+e.field+']='+e.value
115 GridPanel.el.mask('Sending data to server...', 'x-mask-loading');
116 new Ajax.Request('/admin/products/update',
117 {method:'post', parameters:query, onSuccess:unmask, onFailure:unmask});
118 };
119
120 grid.on('afteredit', onAfterEditGrid);
121
And on my controller
1 product = Product.find(params[:id])
2
3 if product.update_attributes(params[:product])
4 render :json => { :success => true, :msg => 'Saved', :data => {} }
5 else
6 render :json => { :success => true, :msg => '#{product.show_errors}', :data => {} }
7 end