ExtJS 6 网格面板商店不填充
ExtJS 6 Grid Panel Store does not populate
我已经通读了 post 在 here, here, similar question, etc 中的 post，但我的问题没有解决。所以我想在这里提出我的问题：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()
});
这是我的查询结果：
[
{
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
}
]
请任何人帮助我。任何想法都将不胜感激。谢谢！
您正在将商店创建到变量中。 StoreManager 希望商店有 storeId 我认为它希望使用 Ext.define
定义商店
如果您像以前一样将商店创建到变量中，则可以直接将变量传递到商店配置中。无需使用店长。
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()
});
顺便说一句，如果你只是在你的应用程序中使用这个网格作为额外的组件，它可能没问题，但如果你正在构建纯 ExtJS 应用程序，我认为你应该使用 Ext.define，定义你的 类并使用更多"standard"方法来创建商店/网格/类一般
您可以在 kitchen-sink 中查看许多 ExtJS 示例 http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid
您需要有商店的 storeId 才能与 StoreManager 一起使用
extjs 6 StoreManager documentation
我已经通读了 post 在 here, here, similar question, etc 中的 post，但我的问题没有解决。所以我想在这里提出我的问题：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()
});
这是我的查询结果：
[
{
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
}
]
请任何人帮助我。任何想法都将不胜感激。谢谢！
您正在将商店创建到变量中。 StoreManager 希望商店有 storeId 我认为它希望使用 Ext.define
定义商店如果您像以前一样将商店创建到变量中，则可以直接将变量传递到商店配置中。无需使用店长。
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()
});
顺便说一句，如果你只是在你的应用程序中使用这个网格作为额外的组件，它可能没问题，但如果你正在构建纯 ExtJS 应用程序，我认为你应该使用 Ext.define，定义你的 类并使用更多"standard"方法来创建商店/网格/类一般
您可以在 kitchen-sink 中查看许多 ExtJS 示例 http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid
您需要有商店的 storeId 才能与 StoreManager 一起使用 extjs 6 StoreManager documentation