PDA

View Full Version : [CLOSED] Add new row on TAB press in GridPanel Component and normal Column



matrixwebtech
Dec 23, 2014, 4:27 AM
Hi Daniil,
I am trying to implement the functionality with component column and found a previous forum thread related to this.
I try as per http://forums.ext.net/showthread.php?21924-CLOSED-GridPanel-Next-CellEditor-Status&p=94736&viewfull=1#post94736 but unfortunately not working (a javascript error occurred,but don't understand why ) for me can you please investigate.

can you please let me know,after fix,is this code working for normal grid columns?

Please run the sample.as per previous thread I do it with ENTER key but its good for me if you correct this with TAB key.
run the sample,1st add a row on button click,after 1st row add try to add a new row with key press functionality.


@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
var addPlant = function () {

var r = Ext.create('pr', {
}),
grid = App.GridPanel;
grid.store.insert(0, r);
grid.getView().refresh();

};
</script>
</head>
<body>
<div>
@Html.X().ResourceManager()
@(Html.X().GridPanel()
.Title("ComponentColumn Editor")
.ID("GridPanel")
.TopBarItem(Html.X().Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add))
.Width(600)
.Height(300)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Name("pr")
.Fields(
new ModelField("IntField", ModelFieldType.Int)

)
)

)
.ColumnModel(
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("IntField")
.Flex(1)
.Text("Integer")
.Component(
Html.X().NumberField()
.Listeners(l=>{
l.SpecialKey.Handler = @"if (e.getKey() === e.ENTER) {
this.up('gridpanel').enterWasPressed = true;
}";

})
)
)
.Listeners(l=>{
l.Edit.Handler = @"if (e.grid.enterWasPressed) {
this.startEdit(e.rowIdx + 1, e.column);
e.grid.enterWasPressed = false;
}";

})


)


</div>
</body>
</html>

Daniil
Dec 23, 2014, 5:30 PM
Hi @matrixwebtech,

Implementing this functionality with ComponentColumns I would try not to use the Edit event at all. I would try to add a new row inside the NumberField's SpecialKey handler.

matrixwebtech
Dec 23, 2014, 5:53 PM
Hi
as per your suggestion I do,


l.SpecialKey.Handler = @"if (e.getKey() === e.TAB) {
// this.up('gridpanel').enterWasPressed = true;
addPlant();
}";
this code add add row at first position,but I want to add row after, if no row present after this row where I press TAB.

Update
I add
grid.store.insert(grid.getStore().getCount()+1, r); to addPlant() and I am able to do this.but also one thing still remaining.
how I set focus to first component of new created row.

matrixwebtech
Dec 26, 2014, 9:02 AM
I am waiting for a reply for http://forums.ext.net/showthread.php?49382-Add-new-row-on-TAB-press-in-GridPanel-Component-and-normal-Column&p=222831&viewfull=1#post222831

Daniil
Dec 26, 2014, 9:18 AM
Apologize for the delay.

Please try:

App.ComponentColumn1.getComponent(indexOfNewRow).f ocus();