Extjs editable table editorgridpannel

You can use editorgridpannel to edit table data. The editable table in extjs is represented by Ext. Grid. editorgridpannel.

Xtype is editorgrid. Using editorgridpannel is the same as using a common gridpannel. When defining the column information, you can specify the edits used by a column.

Ext. onready (function (){

VaR DATA = [{ID: 1,

Name: "Xiao Wang ",

Email: xiaowang@163.com ",

Sex: "male ",

Borndata: "1987-1-2 "},

{ID: 1,

Name: "Xiao Li ",

Email: xiaoli@163.com ",

Sex: "male ",

Borndata: "1987-1-2 "},

];

VaR store = new Ext. Data. josnstore ({

Data: data;

Field: ["ID", "name", "sex", "email", {name: "borndata", type: "data", dataformat: "Y-n-J"}]

});

VaR colim = new Ext. gird. columnmodel ([{

Header: "name ",

Dataindex: "name ",

Sortable: True,

Editor: New Ext. Form. textfield ()},

{Header: "gender ",

Dataindex: "sex "},

{Header: "Date of Birth ",

Dataindex: "borndata ",

Width: 120,

Render: Ext. util. format. datarender ("Y, M, D ")},

{Header: "email ",

Dataindex: "email ",

Sortable: True,

Editor: New Ext. Form. textfield ()}

]);

VaR grid = new Ext. Grid. editorgridpannel ({

Renderto: "hello ",

Title: "basic student information management ",

Height: 200,

Width: 600,

CM: Colm,

Store: store,

Autoexpandcolumn: 3

});

});

For name and email, we use editor to define the editor used for this column. Use Ext. Form. textfield.

For gender, select Ext. Form. ComboBox. from the drop-down list.

Use new Ext. Grid. editorgridpannel () to create an editable table.

The following code edits the column information of gender and Birthdate:

VaR Colm = new Ext. Grid. columnmodel ([{

Header: "name ",

Dataindex: "name ",

Sortable: True,

Editor: New Ext. Form. textfield ()},

{Header: "gender ",

Dataindex: "sex ",

Editor: New Ext. Form. ComboBox ({transform: "sexlist ",

Triggeraction: "All ",

Lazyrender: true })

};

{Header: "Date of Birth ",

Dataindex: "borndata ",

Width: 120,

Renderer: Ext. util. format. datarenderer ("Y, M, D "),

Editor: New Ext. Form. datafield ({format: "Y, M, D "})},

{Header: "email ",

Dataindex: "email ",

Sortable: True,

Editor: New Ext. Form. textfield ()}

]);

VaR gird = new Ext. Grid. editorgridpannel ({

Renderto: "hello ",

Title: "basic student information management ",

Height: 200,

Widtn: 600,

CM: Colm,

Store: store,

Autoexpandcolumn: 3,

Clickstoedit: 1

});

When we define editorgridpannel. Add the "clickstoedit: 1" attribute to trigger editing when a cell is clicked. By default, this value is 2. To fill the ComboBox with data, we set the transform Configuration Attribute Value of this component to sexlist. sexlist is a traditional <SELECT> box.

HTML page code:

<SELECT>

<Option> male </option>

<Option> female </option>

</SELECT>

How do I save the edited data?

When a cell is edited, The Afteredit event is triggered.

This. Grid. On ("Afteredit", this. Afteredit, this );

.....

Afteredit: function (OBJ ){

VaR r = obj. record;

VaR id = R. Get ("ID ");

VaR name = R. Get ("name ");

VaR c = This. record2obj (R );

VaR tree = This. tree;

VaR node = tree. getselectionmodel (). getselectnode ();

If (node & node. ID = "root") C. parentid = node. ID;

If (ID = "-1" & name! = ""){

Topiccategroyservice. addtopiccategory (C, function (ID ){

If (ID) R. Set ("ID", ID );

If (! Node) node = tree. root;

Node. appendchild (New Ext. Tree. treenode ({

ID: ID,

Text: C. Name,

Leaf: True

}));

Node. getui (). removeclass ("X-tree-node-leaf ");

Node. getui (). addclass ("X-tree-node-expanded ");

Node. Expand ();

});

}

Else if (name! = "")

{Topiccategoryservice. updatetopiccategory (R. Get ("ID"), C, function (RET ){

If (RET) tree. getnodebyid (R. Get ("ID"). settext (C. Name );

});

}

}