Asp.Net C# dengan ExtJs

2008 August 27 at 9:52 am 6 comments

Setelah beberapa tahun saya di web programing, dan para user selalu menginginkan tampilan web programming seperti di desktop, saya selalu kesusahan menjelasakn betapa sulitnya mewujudkan hal itu pada para user. Tapi setelah browsing2 akhirnya menemukan pencerahan setelah menemukan mahluk ExtJS coba bayangkan kProject pertama saya memakai ExtJS Gridita bisa membuat grid view seperti ini dengan kemampuan show-hide kolom dengan hanya mencentang/tidak mencentang colum header, sorting , header colum yang difreeze, paging dengan mudah hanya tinggal pakai class paging, tentukan template source data dan grid, lihat potongan dibawah ini:

eval_dt= new Ext.data.Store({
remoteSort:true//untuk sort req langsung ke server bukan di Web, berhubungan ama properties ‘sortInfo’
,sortInfo:{field: ‘eval_no’, direction: “Asc”}//
,proxy: new Ext.data.HttpProxy({
url: ‘evaluation.aspx’,
method: ‘POST’
}),
baseParams:{
task: “getdata”
},
reader: new Ext.data.JsonReader(
{
root: ‘results’,
totalProperty: ‘total’,
id: ‘ev_id’
},[

{name: ‘ev_id’, mapping: ‘ev_id’},
{name: ‘dept_name’, mapping: ‘dept_name’},
{name: ‘eval_no’, mapping: ‘eval_no’},
{name: ‘expected_date’, mapping: ‘expected_date’},
{name: ‘title’, mapping: ‘title’},
{name: ‘purpose’, mapping: ‘purpose’},
{name: ‘background’, mapping: ‘background’},
{name: ‘tech_support’, mapping: ‘tech_support’},
{name: ‘comp_data’, mapping: ‘comp_data’},
{name: ‘pic_name’, mapping: ‘pic_name’}
])
});
var grid_data = new Ext.grid.GridPanel({
//ev_id, eval_no, Convert(Varchar(10),expected_date,110), title, purpose, background
renderTo:’Grid_tab’,
width:998,
height:550,
store:eval_dt,
cm: new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),//untuk tambahan Colum Row Number
{header: “Eval No”, sortable: true, width: 65, dataIndex: ‘eval_no’},
{header: “Dept Name”,sortable: true, width: 150,dataIndex: ‘dept_name’},
{header: “PIC Name”, sortable: true, dataIndex: ‘pic_name’},
{header: “Exp. Date”, sortable: true, width: 75, dataIndex: ‘expected_date’},
{header: “Title”, sortable: true, dataIndex: ‘title’},
{header: “Purpose”, sortable: true, dataIndex: ‘purpose’},
{header: “Background”, sortable: true, dataIndex: ‘background’},
{header: “Tech Support”, sortable: true, dataIndex: ‘tech_support’},
{header: “Comp Data”, sortable: true, dataIndex: ‘comp_data’}
]
)
,bbar: new Ext.PagingToolbar({
pageSize: 35,
store: eval_dt,
displayInfo: true
})

Project pertama saya memakai ExtJS Grid

Entry filed under: Programming. Tags: .

Info Yang Ingin Migrasi Ke OpenSource (LINUX) Auto Send Read Receipt Tracking di Outlook

6 Comments Add your own

  • 1. rakha  |  2008 August 30 at 2:56 pm

    help me…..gimana caranya mengatur remove link button antara grid yang satu dengan yang lainnya..?

    Reply
  • 2. b4ngb4ng  |  2008 September 4 at 9:26 am

    bisa diperjelas maksud remove link button?

    Reply
  • 3. iskandar  |  2009 August 9 at 9:14 pm

    para suhu..saya mo nanya, kalo Ext-js tu free apa license? soalnya saya coba bikin app pake Ext-js.
    terima kasih

    Reply
  • 5. newbie  |  2009 October 29 at 1:05 pm

    url:”evaluation.aspx”
    bisa liat sourcenya… aq dah buat pagingtoolbarnya tapi tetep yg ada d gridpanel semua data

    Reply
    • 6. Bangbang Ahmad  |  2009 October 29 at 1:35 pm

      pada Pagingtoolbar itu akan dikirim 2 variable tergantung “method” yang dipakai pada “Ext.data.Store” (GET / POST) ke server
      POST[‘limit’] dan POST[‘start’], kalau pakai method POST
      atau
      GET [‘limit’] dan GET [‘start’], kalau pakai method GET

      setelah itu perhatikan attribut “pageSize” untuk komponen Ext.PagingToolbar ini berfungsi berapa baris yang akan anda tampilkan di grid per halamannya

      attribut pageSize ini berhubungan dengan limit dari yangd di-POST / GET diatas

      kemudian anda harus perhatikan
      attribut “totalProperty” dari reader “Ext.data.Store”
      misal contoh dibawah ini ‘total
      reader: new Ext.data.JsonReader(
      {
      root: ‘results’,
      totalProperty: ‘total
      },rec_dt)

      dari sisi server harus parsing json seperti ini
      “({‘total‘:tot,’results’:json_data})”
      tot: disini adalah select count (*) dari semua data
      json_data adalah hasil dari query table dalam format json

      smoga bisa membantu

      Catatan: format data bisa JSON atau XML tapi saya lebih memilih format JSON karena lebih ringan

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Categories


%d bloggers like this: