stackoom
  简体   繁体   中英

ExtJS 6 Grid Panel Store does not populate

 原文  2017-05-05 19:35:54  6   2    javascript/ php/ extjs/ gridpanel

Question

I've read through post by post in here , here , similar question , etc , but nothing's work in my problem. So I would like to raise my question here: How to populate ExtJS grid panel with PHP (I'm using ExtJS 6.2)? 

var programStore = Ext.create('Ext.data.JsonStore', {
    remoteSort: false,
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/navigasipskl/model/izin.php',
        actionMethods: {
            read: 'POST',
            update: 'POST',
            create: 'POST'
        },
        reader: {
            type: 'json',
            root: 'root',
            idProperty: 'id'
        }
    },
    sorters: [{
       property: 'id',
       direction: 'ASC'
    }],
    fields: [
        {name: 'id'},
        {name: 'provinsi'},
        {name: 'kabkot'},
        {name: 'kecamatan'},
        {name: 'desa'},
        {name: 'skema'},
        {name: 'hl'},
        {name: 'hp'},
        {name: 'hpt'},
        {name: 'hpk'},
        {name: 'sk_no'},
        {name: 'sk_tanggal'},
        {name: 'sk_luas'},
        {name: 'lembaga_jenis'},
        {name: 'lembaga_nama'},
        {name: 'pendamping_lembaga'},
        {name: 'pendamping_nama'},
        {name: 'pendamping_kontak'},
        {name: 'pendamping_email'},
        {name: 'komoditi_jenis'},
        {name: 'komoditi_nama'},
        {name: 'komoditi_luas'},
        {name: 'jml_kk'},
        {name: 'ketua_nama'},
        {name: 'ketua_kontak'},
        {name: 'ketua_email'},
        {name: 'factsheet'},
        {name: 'file_sk'},
        {name: 'file_peta'},
        {name: 'p_83'},
        {name: 'pemegang_izin'},
        {name: 'jenis_izin_pemanfaatan'},
        {name: 'kelompok_mitra'},
        {name: 'jenis_kemitraan'}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('programStore'),
    columns: [
        {text: 'Id', flex: 1, dataIndex: 'id', hidden: true},
        {text: 'Provinsi', flex: 1, dataIndex: 'provinsi'},
        {text: 'Kabupaten/Kota', flex: 1, dataIndex: 'kabkot', hidden: true},
        {text: 'Kecamatan', flex: 1, dataIndex: 'kecamatan', hidden: true},
        {text: 'Desa', flex: 1, dataIndex: 'desa', hidden: true},
        {text: 'Skema', flex: 2, dataIndex: 'skema'},
        {text: 'Hutan Lindung', flex: 1, dataIndex: 'hl', hidden: true},
        {text: 'Hutan Produksi', flex: 1, dataIndex: 'hp', hidden: true},
        {text: 'Hutan Produksi Terbatas', flex: 1, dataIndex: 'hpt', hidden: true},
        {text: 'HPK', flex: 1, dataIndex: 'hpk', hidden: true},
        {text: 'SK No', flex: 1, dataIndex: 'sk_no', hidden: true},
        {text: 'Jenis Lembaga', flex: 1, dataIndex: 'lembaga_jenis', hidden: true},
        {text: 'Nama Lembaga', flex: 1, dataIndex: 'lembaga_nama', hidden: true},
        {text: 'Nama Komoditi', flex: 1, dataIndex: 'komoditi_nama'},
        {text: 'Jumlah KK', flex: 1, dataIndex: 'jml_kk'},
        {text: 'Nama Ketua', flex: 1, dataIndex: 'ketua_nama'},
        {text: 'Kontak Ketua', flex: 1, dataIndex: 'ketua_kontak', hidden:true},
        {text: 'Izin Pemanfaatan', flex: 1, dataIndex: 'jenis_izin_pemanfaatan', hidden:true},
        {text: 'Jenis Kemitraan', flex: 1, dataIndex: 'jenis_kemitraan', hidden:true}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

And here is my query results: [ { id: "1", provinsi: "SUMATERA UTARA", kabkot: "TAPANULI SELATAN", kecamatan: "Sayur Matinggi", desa: "Aek Badak Julu", skema: "HD", hl: "435", hp: "0", hpt: null, hpk: "0", sk_no: "SK.1010/Menlhk-PSKL/PKPS/PSL.0/3/2017", sk_tanggal: "3/10/2017", sk_luas: "435", lembaga_jenis: null, lembaga_nama: null, pendamping_lembaga: null, pendamping_nama: null, pendamping_kontak: null, pendamping_email: null, komoditi_jenis: null, komoditi_nama: null, komoditi_luas: "0", jml_kk: "348", ketua_nama: "Kasnihati / -", ketua_kontak: "082165489955 / -", ketua_email: null, factsheet: null, file_sk: null, file_peta: null, p_83: "sesudah", pemegang_izin: null, jenis_izin_pemanfaatan: null, kelompok_mitra: null, jenis_kemitraan: null }, { id: "2", provinsi: "SUMATERA UTARA", kabkot: "TAPANULI TENGAH", kecamatan: "Andam", desa: "Sigolang", skema: "HD", hl: "0", hp: "1414", hpt: null, hpk: "0", sk_no: "SK.1014/Menlhk-PSKL/PKPS/PSL.0/3/2017", sk_tanggal: "3/10/2017", sk_luas: "1414", lembaga_jenis: null, lembaga_nama: null, pendamping_lembaga: null, pendamping_nama: null, pendamping_kontak: null, pendamping_email: null, komoditi_jenis: null, komoditi_nama: null, komoditi_luas: "0", jml_kk: "170", ketua_nama: "Jarifon Tinam Bunan / -", ketua_kontak: "081375194193 / -", ketua_email: null, factsheet: null, file_sk: "SK HPHD SIGOLANG.pdf", file_peta: "SIGOLANG.JPG", p_83: "sesudah", pemegang_izin: null, jenis_izin_pemanfaatan: null, kelompok_mitra: null, jenis_kemitraan: null } ] [ { id: "1", provinsi: "SUMATERA UTARA", kabkot: "TAPANULI SELATAN", kecamatan: "Sayur Matinggi", desa: "Aek Badak Julu", skema: "HD", hl: "435", hp: "0", hpt: null, hpk: "0", sk_no: "SK.1010/Menlhk-PSKL/PKPS/PSL.0/3/2017", sk_tanggal: "3/10/2017", sk_luas: "435", lembaga_jenis: null, lembaga_nama: null, pendamping_lembaga: null, pendamping_nama: null, pendamping_kontak: null, pendamping_email: null, komoditi_jenis: null, komoditi_nama: null, komoditi_luas: "0", jml_kk: "348", ketua_nama: "Kasnihati / -", ketua_kontak: "082165489955 / -", ketua_email: null, factsheet: null, file_sk: null, file_peta: null, p_83: "sesudah", pemegang_izin: null, jenis_izin_pemanfaatan: null, kelompok_mitra: null, jenis_kemitraan: null }, { id: "2", provinsi: "SUMATERA UTARA", kabkot: "TAPANULI TENGAH", kecamatan: "Andam", desa: "Sigolang", skema: "HD", hl: "0", hp: "1414", hpt: null, hpk: "0", sk_no: "SK.1014/Menlhk-PSKL/PKPS/PSL.0/3/2017", sk_tanggal: "3/10/2017", sk_luas: "1414", lembaga_jenis: null, lembaga_nama: null, pendamping_lembaga: null, pendamping_nama: null, pendamping_kontak: null, pendamping_email: null, komoditi_jenis: null, komoditi_nama: null, komoditi_luas: "0", jml_kk: "170", ketua_nama: "Jarifon Tinam Bunan / -", ketua_kontak: "081375194193 / -", ketua_email: null, factsheet: null, file_sk: "SK HPHD SIGOLANG.pdf", file_peta: "SIGOLANG.JPG", p_83: "sesudah", pemegang_izin: null, jenis_izin_pemanfaatan: null, kelompok_mitra: null, jenis_kemitraan: null } ] Please anyone help me. Any thought is greatly appreciated. Thanks!

2 answers

solution1
 0 ACCPTED  2017-05-06 00:41:19

You are creating the store into the variable. StoreManager is expecting the store to have storeId also I think it expects the store to be defined using Ext.define

If you create the store into a variable as you did you can than pass the variable into the store config directly. No need to use store manager. 

var programStore = Ext.create('Ext.data.JsonStore', {
    remoteSort: false,
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/navigasipskl/model/izin.php',
        actionMethods: {
            read: 'POST',
            update: 'POST',
            create: 'POST'
        },
        reader: {
            type: 'json',
            root: 'root',
            idProperty: 'id'
        }
    },
    sorters: [{
       property: 'id',
       direction: 'ASC'
    }],
    fields: [
        {name: 'id'},
        {name: 'provinsi'},
        {name: 'kabkot'},
        {name: 'kecamatan'},
        {name: 'desa'},
        {name: 'skema'},
        {name: 'hl'},
        {name: 'hp'},
        {name: 'hpt'},
        {name: 'hpk'},
        {name: 'sk_no'},
        {name: 'sk_tanggal'},
        {name: 'sk_luas'},
        {name: 'lembaga_jenis'},
        {name: 'lembaga_nama'},
        {name: 'pendamping_lembaga'},
        {name: 'pendamping_nama'},
        {name: 'pendamping_kontak'},
        {name: 'pendamping_email'},
        {name: 'komoditi_jenis'},
        {name: 'komoditi_nama'},
        {name: 'komoditi_luas'},
        {name: 'jml_kk'},
        {name: 'ketua_nama'},
        {name: 'ketua_kontak'},
        {name: 'ketua_email'},
        {name: 'factsheet'},
        {name: 'file_sk'},
        {name: 'file_peta'},
        {name: 'p_83'},
        {name: 'pemegang_izin'},
        {name: 'jenis_izin_pemanfaatan'},
        {name: 'kelompok_mitra'},
        {name: 'jenis_kemitraan'}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    store: programStore, // use variable if not using Ext.define
    columns: [
        {text: 'Id', flex: 1, dataIndex: 'id', hidden: true},
        {text: 'Provinsi', flex: 1, dataIndex: 'provinsi'},
        {text: 'Kabupaten/Kota', flex: 1, dataIndex: 'kabkot', hidden: true},
        {text: 'Kecamatan', flex: 1, dataIndex: 'kecamatan', hidden: true},
        {text: 'Desa', flex: 1, dataIndex: 'desa', hidden: true},
        {text: 'Skema', flex: 2, dataIndex: 'skema'},
        {text: 'Hutan Lindung', flex: 1, dataIndex: 'hl', hidden: true},
        {text: 'Hutan Produksi', flex: 1, dataIndex: 'hp', hidden: true},
        {text: 'Hutan Produksi Terbatas', flex: 1, dataIndex: 'hpt', hidden: true},
        {text: 'HPK', flex: 1, dataIndex: 'hpk', hidden: true},
        {text: 'SK No', flex: 1, dataIndex: 'sk_no', hidden: true},
        {text: 'Jenis Lembaga', flex: 1, dataIndex: 'lembaga_jenis', hidden: true},
        {text: 'Nama Lembaga', flex: 1, dataIndex: 'lembaga_nama', hidden: true},
        {text: 'Nama Komoditi', flex: 1, dataIndex: 'komoditi_nama'},
        {text: 'Jumlah KK', flex: 1, dataIndex: 'jml_kk'},
        {text: 'Nama Ketua', flex: 1, dataIndex: 'ketua_nama'},
        {text: 'Kontak Ketua', flex: 1, dataIndex: 'ketua_kontak', hidden:true},
        {text: 'Izin Pemanfaatan', flex: 1, dataIndex: 'jenis_izin_pemanfaatan', hidden:true},
        {text: 'Jenis Kemitraan', flex: 1, dataIndex: 'jenis_kemitraan', hidden:true}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Btw if you are just using this grid in your app as extra component it might be fine but if you are building pure ExtJS app I think you should rather use Ext.define, define your classes and use more "standard" approach to creating stores / grids / classes in general

You can check many ExtJS examples in the kitchen-sink http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid

solution2
 0  2017-05-07 19:32:50

您需要有一个storeId供商店使用StoreManager extjs 6 StoreManager文档

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question ExtJS Grid Panel not populating data from store EXT Grid panel does not populate data and creates blank rows EXTJS GRID and store Grid inside a panel extJS (Sencha) ExtJS Ajax problems for grid panel Problem with ExtJs editor grid panel Customizing ExtJs Tree Grid panel Scroll event on ExtJS Grid Panel? Hard coded data in global store does not show in extjs grid ExtJS--changing proxy URL then loading store does not update grid
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM