[CLOSED] To continue with grid creation from code behind.

[feanor91]

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 :



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



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]

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]

I had the same idea and tried it, but result is exactly the same.

[Daniil]

Please demonstrate the updated VS code and new JavaScript output.

[feanor91]

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]

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]

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]

Well, it looks totally similar to the code that you posted initially.

I can't see where you applied my suggestion.

[feanor91]

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]

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)