ExtJS 6 Grid Panel Store не заполняется

Question

ExtJS 6 Grid Panel Store не заполняется

Я прочитал пост по почте здесь, здесь, аналогичный вопрос и т. Д., Но ничего не помогло в моей проблеме. Поэтому я хотел бы поднять свой вопрос здесь: Как заполнить панель сетки ExtJS PHP (я использую 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 } ]Пожалуйста, кто-нибудь, помогите мне. Любая мысль очень ценится. Спасибо!

1

javascript php extjs gridpanel

Источник

user6181503 05 май '17 в 19:35

2 ответа

Решение

У вас должен быть storeId для магазина, который будет использоваться с StoreManager extjs 6 Документация StoreManager

0

Источник

user7956212 07 май '17 в 19:32

Другие вопросы по тегам javascript php extjs gridpanel

user1768843 06 май '17 в 00:41 2017-05-06 00:41 · Accepted Answer · 2017-05-06 00:41

Вы создаете магазин в переменной. 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, определить ваши классы и использовать более "стандартный" подход к созданию магазинов / сетки / классы в целом

Вы можете проверить много примеров ExtJS в кухонной раковине http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/