close
由於最近公司的案子，是使用Ext.net 來做的，基本上Ext.net 跟 asp.net 的差別在於，Ext.net 使用上更為簡單好操作，但相對的Ext.net
算是剛開發的工具，所以在bug上也不少~ 但整體與 asp.net比較起來，如果不是做相當複雜的案子及視覺上的呈現
Ext.net算是相當快述簡易的一項開發工具，這篇就來介紹一下 Ext.net的GridPenal 也相當於asp.net的GridView
GridPenal :
<ext:GridPanel ID="GridPanelQuery" runat="server" Region="North" Split="true" Height="250" Padding="0" > <View> <ext:GridView ID="GridViewQuery" runat="server" LoadMask="true" /> </View> <Store> <ext:Store ID="StoreQry" runat="server" PageSize="10"> <Model> <ext:Model ID="Modelqry" runat="server" Name="AAA" IDProperty="SEQNO"> <Fields> <ext:ModelField Name="SEQNO" Mapping="SEQNO" /> <ext:ModelField Name="CNTRNO" Mapping="CNTRNO" /> <ext:ModelField Name="CNTRNAME" Mapping="CNTRNAME" /> <ext:ModelField Name="PRDEPTCODE" Mapping="PRDEPTCODE" /> <ext:ModelField Name="PRDEPTNAME" Mapping="PRDEPTNAME" /> <ext:ModelField Name="VALDEPTCODE" Mapping="VALDEPTCODE" /> <ext:ModelField Name="VALDEPTNAME" Mapping="VALDEPTNAME" /> <ext:ModelField Name="ADOCNO" Mapping="ADOCNO" /> <ext:ModelField Name="ADOCNAME" Mapping="ADOCNAME" /> <ext:ModelField Name="SCANID" Mapping="SCANID" /> <ext:ModelField Name="ATTACHFILEPATH" Mapping="ATTACHFILEPATH" /> <ext:ModelField Name="KK" Mapping="KK" /> <ext:ModelField Name="UPDATOR" Mapping="UPDATOR" /> <ext:ModelField Name="UPDATDT" Mapping="UPDATDT" /> <ext:ModelField Name="CREATOR" Mapping="CREATOR" /> <ext:ModelField Name="CREATDT" Mapping="CREATDT" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <ColumnModel> <Columns> <ext:RowNumbererColumn ID="RowNumbererColumn3" Text="序號" runat="server" Width="30" /> <ext:Column ID="col_SEQNO" runat="server" Text="counter" Width="100" DataIndex="SEQNO" Sortable="true" Hidden="true" /> <ext:Column ID="col_CNTR" runat="server" Text="契約"> <Columns> <ext:Column ID="col_CNTRNO" runat="server" Text="號碼" Width="50" DataIndex="CNTRNO" Sortable="true" /> <ext:Column ID="col_CNTRNAME" runat="server" Text="名稱" Width="50" DataIndex="CNTRNAME" Sortable="true" /> </Columns> </ext:Column> <ext:Column ID="col_PRDEPT" runat="server" Text="採購單位"> <Columns> <ext:Column ID="col_PRDEPTCODE" runat="server" Text="代號" Width="50" DataIndex="PRDEPTCODE" Sortable="true" /> <ext:Column ID="col_PRDEPTNAME" runat="server" Text="名稱" Width="50" DataIndex="PRDEPTNAME" Sortable="true" /> </Columns> </ext:Column> <ext:Column ID="col_VALDEPT" runat="server" Text="計價單位"> <Columns> <ext:Column ID="col_VALDEPTCODE" runat="server" Text="號碼" Width="50" DataIndex="VALDEPTCODE" Sortable="true" /> <ext:Column ID="col_VALDEPTNAME" runat="server" Text="名稱" Width="50" DataIndex="VALDEPTNAME" Sortable="true" /> </Columns> </ext:Column> <ext:Column ID="col_ADOCNO" runat="server" Text="文件代號" Width="100" DataIndex="ADOCNO" Hidden="true" Sortable="true" /> <ext:Column ID="col_ADOCNAME" runat="server" Text="文件名稱" Width="100" DataIndex="ADOCNAME" Sortable="true" /> <ext:Column ID="col_SCANID" runat="server" Text="掃描編號" Width="100" DataIndex="SCANID" Sortable="true" /> <%-- <ext:Column ID="col_ATTACHFILEPATH" runat="server" Text="附加檔案路徑" Width="100" DataIndex="ATTACHFILEPATH" Sortable="true" />--%> <ext:Column ID="col_ATTACHFILEPATH" runat="server" Text="附加檔案路徑" Width="100" DataIndex="KK" Sortable="true" > <Renderer Fn="linkRenderer" /> </ext:Column> </Columns> </ColumnModel> <%--最下方分頁工具列 --%> <BottomBar> <ext:PagingToolbar ID="PagingToolbar1b" runat="server" DisplayInfo="true" DisplayMsg="第{0}筆至{1}筆 資料總計{2}筆" /> </BottomBar> <%-- <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" /> </SelectionModel> <DirectEvents> <Select OnEvent="SelectedField"> <ExtraParams> <ext:Parameter Name="Values" Value="Ext.encode(#{p1_gpSelect1}.getRowsValues({selectedOnly:true}))" Mode="Raw" /> </ExtraParams> </Select> </DirectEvents>--%> <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" /> </SelectionModel> <DirectEvents> <Select OnEvent="SelectedField"> <ExtraParams> <ext:Parameter Name="SEQNO" Value="record.get('SEQNO')" Mode="Raw" /> <ext:Parameter Name="CNTRNO" Value="record.get('CNTRNO')" Mode="Raw" /> <ext:Parameter Name="CNTRNAME" Value="record.get('CNTRNAME')" Mode="Raw" /> <ext:Parameter Name="PRDEPTCODE" Value="record.get('PRDEPTCODE')" Mode="Raw" /> <ext:Parameter Name="PRDEPTNAME" Value="record.get('PRDEPTNAME')" Mode="Raw" /> <ext:Parameter Name="VALDEPTCODE" Value="record.get('VALDEPTCODE')" Mode="Raw" /> <ext:Parameter Name="VALDEPTNAME" Value="record.get('VALDEPTNAME')" Mode="Raw" /> <ext:Parameter Name="ADOCNO" Value="record.get('ADOCNO')" Mode="Raw" /> <ext:Parameter Name="ADOCNAME" Value="record.get('ADOCNAME')" Mode="Raw" /> <ext:Parameter Name="SCANID" Value="record.get('SCANID')" Mode="Raw" /> <ext:Parameter Name="ATTACHFILEPATH" Value="record.get('ATTACHFILEPATH')" Mode="Raw" /> <ext:Parameter Name="KK" Value="record.get('KK')" Mode="Raw" /> <ext:Parameter Name="UPDATOR" Value="record.get('UPDATOR')" Mode="Raw" /> <ext:Parameter Name="UPDATDT" Value="record.get('UPDATDT')" Mode="Raw" /> <ext:Parameter Name="CREATOR" Value="record.get('CREATOR')" Mode="Raw" /> <ext:Parameter Name="CREATDT" Value="record.get('CREATDT')" Mode="Raw" /> </ExtraParams> </Select> </DirectEvents> </ext:GridPanel>
利用<Model> 這個節點，來塞入想要存取的 Sql資料欄位，利用"ModelField" 並給予名稱，及Mapping也就是所對應的欄位名稱(資料庫的欄位名稱)
然後用<ColumnModel> 來呈顯要顯示的表格資料 並將使用 Column節點來設定資料欄位 ex: 要顯示 姓名欄位
則 <ext:Column ID="col_Name" runat="server" Text="counter" Width="100" DataIndex="NAME" Sortable="true" />
這裡順道提一下，在<Model> Mapping 欄位名稱時記得要大寫， 即便是您後置碼塞的sql名稱是小寫，但轉到前置碼實，都會變大寫
所以假設您的姓名欄位取為 Name 但在Mapping 的時候也要為NAME 才抓得到值， ....再來，回到Column回 這裡DataIndex 就是對應Mapping中所給的"Name"
<ext:ModelField Name="NAME" Mapping="NAME" /> 如左邊這段程式碼， 設定好之後，簡單的Grid表格就出來啦!!!
當然後置馬記得要 DataBind() ex: 以這邊范例為例，Grid名稱為 "GridPanelQuery" 則
GridPanelQuery.GetStore().DataSource = dt; GridPanelQuery.GetStore().DataBind();
而 <ExtraParams> 這項結點，則是方便我們在後置碼取直用的
Ex
protected void SelectedField(object sender, DirectEventArgs e)
{
e.ExtraParams["ITEM_PLAN_ID"].ToString()
}
以上面的 SelectedField 方法來看，就可以利用 DirectEventArgs 這參數來去取名為ITEM_PLAN_ID 資料 ，當然此SelectedField 此方法
則是被定義在與<ExtraParams>相同的<DirectEvents>節點內
這樣的做法可以方便取直給 FromView 內的資料欄位對應做 新、刪、修 工用 之一
全站熱搜
留言列表
{{ article.title }}