PDA

View Full Version : [CLOSED] To continue with grid creation from code behind.



feanor91
Jan 24, 2013, 8:10 AM
Hello

As I have problem with store, I continu to work to see if I manage to make the grid that will load the store works.

I use a store already define in markup to test it.

The grid define in markup look like this :

5463

I want code behind grid look the same but here what I get :

5464

For grid definition I have the good one in markup like that:



<ext:GridPanel
ID="grdDetailRMA"
runat="server"
Cls="x-grid-custom"
AutoScroll="true"
ColumnLines="True"
Header="false" SortableColumns="False">
<store>
<ext:Store ID="stodetailRMA" runat="server">
<Proxy>
<ext:AjaxProxy Url="jsonDAL/returnJSONDetailRMA.aspx" Json="false" Timeout="300000000" >
<Reader>
<ext:JsonReader Root="Data" TotalProperty="TotalRecords">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="STR_Status" />
<ext:ModelField Name="STR_Tech" />
<ext:ModelField Name="STR_DateMajStatus" />
<ext:ModelField Name="STR_Comment" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Runat="server" ID="colStatusDetailRMA" DataIndex="STR_Status" MenuDisabled="False" Groupable="True" Hideable="False" Resizable="False" Sortable="True" Width="80" Text="Statut" Hidden="False">
</ext:Column>
<ext:Column Runat="server" ID="colTechDetail" DataIndex="STR_Tech" MenuDisabled="False" Groupable="True" Hideable="False" Resizable="False" Sortable="True" Width="80" Text="MAJ par">
</ext:Column>
<ext:Column Runat="server" ID="colUpdateDate" DataIndex="STR_DateMajStatus" MenuDisabled="False" Groupable="True" Hideable="False" Resizable="False" Sortable="True" Width="150" Text="MAJ le">
</ext:Column>
<ext:Column Runat="server" ID="comCommentDetail" DataIndex="STR_Comment" MenuDisabled="False" Groupable="True" Hideable="False" Resizable="True" Sortable="True" Flex="1" Text="Commentaire" AutoScroll="True" Split="True">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridView2" runat="server" />
</View>
</ext:GridPanel>


And for the one in code behind I have this:



Dim grdStatus As New GridPanel
Dim colModelStatus As New GridHeaderContainer
Dim colStatus As New Column
Dim colTech As New Column
Dim colDateMajStatus As New Column
Dim colComment As New Column

With colStatus
.DataIndex = "STR_Status"
.Width = 80
.Text = "Status"
End With
With colTech
.DataIndex = "STR_Tech"
.Width = 80
.Text = "MAJ par"
End With
With colDateMajStatus
.DataIndex = "STR_DateMajStatus"
.Width = 150
.Text = "MAJ le"
End With
With colComment
.DataIndex = "STR_Comment"
.Flex = 1
.Text = "Commentaire"
End With
colModelStatus.Add(colStatus)
colModelStatus.Add(colTech)
colModelStatus.Add(colDateMajStatus)
colModelStatus.Add(colComment)

With grdStatus
.Cls = "x-grid-custom"
.AutoScroll = True
.ColumnLines = True
.Height = 300
.SortableColumns = False
.ColumnModel.Add(colModelStatus)
.StoreID = "stodetailRMA"
'.Store.Add(StoreStatus)
End With


So, what I have to change to have code behind grid look like the one in markup?

EDIT:
Here, what I get in code behind return:



{
border:false,
items:[
{store:{
model:Ext.define("Model_33841",
{extend: "Ext.data.Model",
fields:[
{name:"STR_Status"},
{name:"STR_Tech"},
{name:"STR_DateMajStatus"},
{name:"STR_Comment"}] }),
storeId:"Store_33841",
autoLoad:true,
proxy:{type:"ajax",
timeout:300000000,
url:"jsonDAL/returnJSONHistoriqueStatus.aspx?RMA=33841"}
},
cls:"x-grid-custom",
height:300,
xtype:"grid",
autoScroll:true,
columnLines:true,
columns:{items:[
{items:[
{id:"STR_Status_33841",
width:80,
dataIndex:"STR_Status",
text:"Status"},
{id:"STR_Tech33841",
width:80,
dataIndex:"STR_Tech",
text:"MAJ par"},
{id:"STR_DateMajStatus33841"
,width:150,
dataIndex:"STR_DateMajStatus",
text:"MAJ le"},
{id:"STR_Comment33841",
flex:1,
dataIndex:"STR_Comment",
text:"Commentaire"}]
}
]
},
sortableColumns:false
}
]
}

Something stange is that the grid seems to be included in the store and the double item to the grid column definition

Daniil
Jan 24, 2013, 9:31 AM
Hi @feanor91,

I think you should add columns directly to the ColumnModel.

So, this

.ColumnModel.Columns.Add(colStatus)
etc., instead of

.ColumnModel.Add(colModelStatus)

feanor91
Jan 24, 2013, 9:46 AM
I had the same idea and tried it, but result is exactly the same.

Daniil
Jan 24, 2013, 9:54 AM
Please demonstrate the updated VS code and new JavaScript output.

feanor91
Jan 24, 2013, 10:12 AM
Sory, my mistake, I try to use
columns.add in the grid definition directly and get
[,,,] in return for colums definition, but with your solution, I have that:

Code behind:


colModelStatus.Columns.Add(colStatus)
colModelStatus.Columns.Add(colTech)
colModelStatus.Columns.Add(colDateMajStatus)
colModelStatus.Columns.Add(colComment)


Javascript:


columns:{
items:[
{items:[
{id:"STR_Status_33841",
width:80,dataIndex:"STR_Status",
text:"Status"},
{id:"STR_Tech33841",
width:80,
dataIndex:"STR_Tech",
text:"MAJ par"},
{id:"STR_DateMajStatus33841",
width:150,
dataIndex:"STR_DateMajStatus"
,text:"MAJ le"}
,{id:"STR_Comment33841",
flex:1,dataIndex:"STR_Comment",
text:"Commentaire"}]
}
]
}

Daniil
Jan 24, 2013, 10:57 AM
Seems you again add columns to the colModelStatus. I meant that you don't need the colModelStatus at all.

Maybe, I misunderstand your post.

Could you demonstrate a full code snippet? Similar to the one that you posted initially.

feanor91
Jan 24, 2013, 11:30 AM
Sure.

Code behind:



Dim grdStatus As New GridPanel
Dim colModelStatus As New GridHeaderContainer
Dim colStatus As New Column
Dim colTech As New Column
Dim colDateMajStatus As New Column
Dim colComment As New Column

With colStatus
.ID = "STR_Status_" + STR_RMA
.DataIndex = "STR_Status"
.Width = 80
.Text = "Status"
End With
With colTech
.ID = "STR_Tech" + STR_RMA
.DataIndex = "STR_Tech"
.Width = 80
.Text = "MAJ par"
End With
With colDateMajStatus
.ID = "STR_DateMajStatus" + STR_RMA
.DataIndex = "STR_DateMajStatus"
.Width = 150
.Text = "MAJ le"
End With
With colComment
.ID = "STR_Comment" + STR_RMA
.DataIndex = "STR_Comment"
.Flex = 1
.Text = "Commentaire"
End With

colModelStatus.Columns.Add(colStatus)
colModelStatus.Columns.Add(colTech)
colModelStatus.Columns.Add(colDateMajStatus)
colModelStatus.Columns.Add(colComment)


With grdStatus
.Cls = "x-grid-custom"
.AutoScroll = True
.ColumnLines = True
.Height = 300
.SortableColumns = False
.ColumnModel.Add(colModelStatus)
.Store.Add(StoreStatus)
End With

MyPanelStatus.Add(grdStatus)
MyPanelTabForDevice.Add(MyPanelStatus)

and javascript return.



{
border:false,
xtype:"tabpanel",
items:[
{border:false,
items:
[{store:
{model:Ext.define("Model_Status33841",
{extend: "Ext.data.Model",
fields:[{name:"STR_Status"},
{name:"STR_Tech"},
{name:"STR_DateMajStatus"},
{name:"STR_Comment"}
]
}),
storeId:"Store_Status33841",
autoLoad:true,
proxy:{type:"ajax",
timeout:300000000,
url:"jsonDAL/returnJSONHistoriqueStatus.aspx?RMA=33841"
}
},
cls:"x-grid-custom",
height:300,
xtype:"grid",
autoScroll:true,
columnLines:true,
columns:{items:[
{items:[
{id:"STR_Status_33841",
width:80,
dataIndex:"STR_Status",
text:"Status"},
{id:"STR_Tech33841",
width:80,
dataIndex:"STR_Tech",
text:"MAJ par"},
{id:"STR_DateMajStatus33841",
width:150,
dataIndex:"STR_DateMajStatus",
text:"MAJ le"},
{id:"STR_Comment33841",
flex:1,
dataIndex:"STR_Comment",
text:"Commentaire"}
]
}]
},
sortableColumns:false
}
],...


How could I bypass colummodel?

Daniil
Jan 24, 2013, 11:38 AM
Well, it looks totally similar to the code that you posted initially.

I can't see where you applied my suggestion.

feanor91
Jan 24, 2013, 11:50 AM
Well, it looks totally similar to the code that you posted initially.

I can't see where you applied my suggestion.

First: lines 28 to 31, second: lines 33 to 36 no?

Daniil
Jan 24, 2013, 12:00 PM
See, thanks.

But I meant another thing.

grdStatus.ColumnModel.Columns.Add(colStatus)
grdStatus.ColumnModel.Columns.Add(colTech)
grdStatus.ColumnModel.Columns.Add(colDateMajStatus )
grdStatus.ColumnModel.Columns.Add(colComment)
instead of

colModelStatus.Columns.Add(colStatus)
colModelStatus.Columns.Add(colTech)
colModelStatus.Columns.Add(colDateMajStatus)
colModelStatus.Columns.Add(colComment)

feanor91
Jan 24, 2013, 12:24 PM
:=))))

It works!

Thanks a lot.

Could you explain please?

Daniil
Jan 24, 2013, 1:55 PM
Well, this

GridPanel1.ColumnModel
is already a GridHeaderContainer instance (not a collection).

So, you put one GridHeaderContainer to another. Therefore there were two "items".

feanor91
Jan 24, 2013, 2:06 PM
Got it, thanks again