PDA

View Full Version : [CLOSED] Hide the last icon in a GridPanel



osef
Jan 20, 2015, 1:03 AM
Hi, I want that the last row doesn't paint the icon to remove the row, for example I have 3 rows, i want to the last row doesnt have the icon, but if i add a new row, this row paints the icon and the fourth row doesnt have the icon, you got it?

http://forums.ext.net/attachment.php?attachmentid=19161&stc=1

After I to add a new record

http://forums.ext.net/attachment.php?attachmentid=19171&stc=1




<script type="text/javascript">
var IdAlimento_Convert = function (valor, registro) {
return registro.get('RAlimento').Id;
};

var Nombre_Convert = function (valor, registro) {
return registro.get('RAlimento').Nombre;
};

var btnAgregar_Click = function () {
var store = App.sCompra;
var total = store.getCount();
var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');

alimento = new Object();
alimento.Id = 10 + total;
alimento.Nombre = "Nombre " + total;

store.add({ Id: total, Fecha: dt, RAlimento: alimento, Cantidad: total, Precio: 203.43 + total, Importe: total * (203.43 + total) });
console.log(store, total);
};

//Evento de la columna de acciones
var ccAcciones_Command = function (columna, comando, registro, fila, opciones) {
//Eliminar registro
App.sCompra.removeAt(fila);
};

</script>




<ext:ResourceManager ID="rmStoreObject" runat="server" />

<ext:GridPanel
ID="gpCompra"
runat="server"
Height="300"
Title="Compras">
<TopBar>
<ext:Toolbar ID="tbCompra" runat="server">
<Items>
<ext:Button ID="btnAgregar" runat="server" Text="Agregar">
<Listeners>
<Click Fn="btnAgregar_Click" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="sCompra" runat="server">
<Model>
<ext:Model ID="mCompra" runat="server">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Fecha" Type="Date" />
<ext:ModelField Name="RAlimento" Type="Object" />
<ext:ModelField Name="IdAlimento" Type="Int">
<Convert Fn="IdAlimento_Convert"/>
</ext:ModelField>
<ext:ModelField Name="Nombre" Type="String">
<Convert Fn="Nombre_Convert"/>
</ext:ModelField>
<ext:ModelField Name="Cantidad" Type="Int" />
<ext:ModelField Name="Precio" Type="Float" />
<ext:ModelField Name="Importe" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:CommandColumn
ID="ccAcciones"
runat="server"
Width="25">
<Commands>
<ext:GridCommand
Icon="Delete"
CommandName="Borrar">
<ToolTip Text="Borrar" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="ccAcciones_Command" />
</Listeners>
</ext:CommandColumn>
<ext:Column ID="cID" runat="server" Text="ID" DataIndex="Id" />
<ext:Column ID="cFecha" runat="server" Text="Fecha" DataIndex="Fecha" />
<ext:Column ID="cIDAlimento" runat="server" Text="ID Alimento" DataIndex="IdAlimento" />
<ext:Column ID="cNombre" runat="server" Text="Nombre" DataIndex="Nombre" />
<ext:Column ID="cCantidad" runat="server" Text="Cantidad" DataIndex="Cantidad" />
<ext:Column ID="cPrecio" runat="server" Text="Precio" DataIndex="Precio" />
<ext:Column ID="cImporte" runat="server" Text="Importe" DataIndex="Importe" />
</Columns>
</ColumnModel>
</ext:GridPanel>




protected void Page_Load(object sender, EventArgs e)
{
sCompra.DataSource = Datos();
sCompra.DataBind();
}

private List<Compra> Datos()
{
List<Compra> lCompra = new List<Compra>();

for (int i = 0; i < 5; i++)
{
Compra oCompra = new Compra();
Alimento oAlimento = new Alimento();

oCompra.Id = i;
oCompra.Fecha = DateTime.Now;
oCompra.IdAlimento = 10 + i;
oCompra.Cantidad = i;
oCompra.Precio = (decimal)(203.43 + i);
oCompra.Importe = oCompra.Cantidad * oCompra.Precio;

oAlimento.Id = 10 + i;
oAlimento.Nombre = "Nombre " + i;

oCompra.RAlimento = oAlimento;

lCompra.Add(oCompra);
}

return lCompra;
}

Daniil
Jan 20, 2015, 9:49 AM
Hi @osef,

I cannot run the code without the definitions of the Compra and Alimento classes.

Also, please make s standalone .aspx test case. That would allows to copy, paste and run the test case almost immediately.

By a standalone test case I mean a test case like Example (Very Helpful) here:
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

osef
Jan 20, 2015, 4:09 PM
This is the code.

Thank you




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
public class GrupoAlimentos
{
#region Fields

byte id;
string nombre;

List<Alimento> ralimento;

#endregion

#region Properties

public byte Id
{
get { return id; }
set { id = value; }
}

public string Nombre
{
get { return nombre; }
set { nombre = value; }
}

public List<Alimento> RAlimento
{
get { return ralimento; }
set { ralimento = value; }
}

#endregion
}

public class Alimento
{
#region Fields

int id;
string nombre;
string marca;
int cantidad;
string unidadmedida;

GrupoAlimentos rgrupoalimentos;

#endregion

#region Properties

public int Id
{
get { return id; }
set { id = value; }
}

public string Nombre
{
get { return nombre; }
set { nombre = value; }
}

public string Marca
{
get { return marca; }
set { marca = value; }
}

public int Cantidad
{
get { return cantidad; }
set { cantidad = value; }
}

public string UnidadMedida
{
get { return unidadmedida; }
set { unidadmedida = value; }
}

public GrupoAlimentos RGrupoAlimentos
{
get { return rgrupoalimentos; }
set { rgrupoalimentos = value; }
}

#endregion
}

public class Compra
{
#region Fields

int id;
DateTime fecha;
int idalimento;
int cantidad;
decimal precio;
decimal importe;

Alimento ralimento;

#endregion

#region Properties

public int Id
{
get { return id; }
set { id = value; }
}

public DateTime Fecha
{
get { return fecha; }
set { fecha = value; }
}

public int IdAlimento
{
get { return idalimento; }
set { idalimento = value; }
}

public int Cantidad
{
get { return cantidad; }
set { cantidad = value; }
}

public decimal Precio
{
get { return precio; }
set { precio = value; }
}

public decimal Importe
{
get { return importe; }
set { importe = value; }
}

public Alimento RAlimento
{
get { return ralimento; }
set { ralimento = value; }
}

#endregion
}

protected void Page_Load(object sender, EventArgs e)
{
sCompra.DataSource = Datos();
sCompra.DataBind();
}

private List<Compra> Datos()
{
List<Compra> lCompra = new List<Compra>();

for (int i = 0; i < 5; i++)
{
Compra oCompra = new Compra();
Alimento oAlimento = new Alimento();

oCompra.Id = i;
oCompra.Fecha = DateTime.Now;
oCompra.IdAlimento = 10 + i;
oCompra.Cantidad = i;
oCompra.Precio = (decimal)(203.43 + i);
oCompra.Importe = oCompra.Cantidad * oCompra.Precio;

oAlimento.Id = 10 + i;
oAlimento.Nombre = "Nombre " + i;

oCompra.RAlimento = oAlimento;

lCompra.Add(oCompra);
}

return lCompra;
}
</script>
<script type="text/javascript">
var IdAlimento_Convert = function (valor, registro) {
return registro.get('RAlimento').Id;
};

var Nombre_Convert = function (valor, registro) {
return registro.get('RAlimento').Nombre;
};

var btnAgregar_Click = function () {
var store = App.sCompra;
var total = store.getCount();
var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');

alimento = new Object();
alimento.Id = 10 + total;
alimento.Nombre = "Nombre " + total;

store.add({ Id: total, Fecha: dt, RAlimento: alimento, Cantidad: total, Precio: 203.43 + total, Importe: total * (203.43 + total) });
console.log(store, total);
};

//Evento de la columna de acciones
var ccAcciones_Command = function (columna, comando, registro, fila, opciones) {
//Eliminar registro
App.sCompra.removeAt(fila);
};

</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="rmStoreObject" runat="server" />

<ext:GridPanel
ID="gpCompra"
runat="server"
Height="300"
Title="Compras">
<TopBar>
<ext:Toolbar ID="tbCompra" runat="server">
<Items>
<ext:Button ID="btnAgregar" runat="server" Text="Agregar">
<Listeners>
<Click Fn="btnAgregar_Click" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="sCompra" runat="server">
<Model>
<ext:Model ID="mCompra" runat="server">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Fecha" Type="Date" />
<ext:ModelField Name="RAlimento" Type="Object" />
<ext:ModelField Name="IdAlimento" Type="Int">
<Convert Fn="IdAlimento_Convert"/>
</ext:ModelField>
<ext:ModelField Name="Nombre" Type="String">
<Convert Fn="Nombre_Convert"/>
</ext:ModelField>
<ext:ModelField Name="Cantidad" Type="Int" />
<ext:ModelField Name="Precio" Type="Float" />
<ext:ModelField Name="Importe" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:CommandColumn
ID="ccAcciones"
runat="server"
Width="25">
<Commands>
<ext:GridCommand
Icon="Delete"
CommandName="Borrar">
<ToolTip Text="Borrar" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="ccAcciones_Command" />
</Listeners>
</ext:CommandColumn>
<ext:Column ID="cID" runat="server" Text="ID" DataIndex="Id" />
<ext:Column ID="cFecha" runat="server" Text="Fecha" DataIndex="Fecha" />
<ext:Column ID="cIDAlimento" runat="server" Text="ID Alimento" DataIndex="IdAlimento" />
<ext:Column ID="cNombre" runat="server" Text="Nombre" DataIndex="Nombre" />
<ext:Column ID="cCantidad" runat="server" Text="Cantidad" DataIndex="Cantidad" />
<ext:Column ID="cPrecio" runat="server" Text="Precio" DataIndex="Precio" />
<ext:Column ID="cImporte" runat="server" Text="Importe" DataIndex="Importe" />
</Columns>
</ColumnModel>
</ext:GridPanel>

</form>
</body>
</html>

Daniil
Jan 21, 2015, 5:11 AM
Inspired by this example:
http://examples2.ext.net/#/GridPanel/Commands/Prepare_Toolbar


<ext:CommandColumn>
<PrepareToolbar Fn="prepareToolbar" />
</ext:CommandColumn>


var prepareToolbar = function(grid, toolbar, rowIndex, record) {
if (grid.getStore().getCount() - 1 == rowIndex) {
toolbar.items.get(0).hide();
}
};


var btnAgregar_Click = function () {
...
App.gpCompra.getView().refreshNode(total - 1); // to refresh the penultimate row
};