Results 1 to 2 of 2

Thread: ExtJS 6.2 GridPanel does not show the store data

  1. #1
    Sencha User
    Join Date
    Apr 2015
    Posts
    1

    Default ExtJS 6.2 GridPanel does not show the store data

    I want to create dynamic Grid Panel, when I hit the search box and the query match with my data, then the grid panel with the data inside will appear. But, the data seems not showing up in the grid eventhough I have successfully fetched it to the client.

    Here is my code:

    Code:
    function quickSearch() {
            if (Ext.getCmp("programSearchGrid"))
                Ext.getCmp('searchResultWindow').remove(Ext.getCmp("programSearchGrid"));
    
    
            var searchKey = Ext.getCmp("tf_quicksearch").value;	
    
    
    		var searchUrl = '/geoserver/wfs?service=wfs&' +
    			'version=1.1.0&request=GetFeature&typeNames=pskl:profil_ps&' +
    			'outputFormat=application/json&exceptions=application/json&srsName=EPSG:900913&';
    
    
    		var programStore = new Ext.data.JsonStore({
    			remoteSort: false,
    			autoLoad: false,
    			storeId: 'profilStore',
    			proxy: new Ext.data.HttpProxy({
    				type: 'ajax',
    				url: 'http://' + window.location.hostname + ':8087' + searchUrl,
    				reader: {
    					type: 'json',
    					root: 'features'
    				},
    				method: 'GET',
    				simpleSortMode: true
    			}),
    			fields: [
    				{name: 'properties.skema_id'},
    				{name: 'properties.provinsi'},
    				{name: 'properties.kabupaten'},
    				{name: 'properties.sk_no'},
    				{name: 'properties.klmpk_tani'},
    				{name: 'properties.nama_areal'},
    				{name: 'properties.nama_kelompok'},
    				{name: 'properties.skema'},
    				{name: 'properties.desa'},
    				{name: 'properties.kecamatan'},
    				{name: 'properties.no_izin'},
    				{name: 'properties.luas_sk_fix'},
    				{name: 'properties.komoditi'},
    				{name: 'properties.kk_jumlah'},
    				{name: 'properties.ketua_nama'},
    				{name: 'properties.ketua_kontak'}
    			]
    		});
    		
    		var grid = Ext.create('Ext.grid.Panel', {
    			hideCollapseTool: true,
    			closable: false,
        		width: 120,
    			closeAction: 'hide',
    			id: 'programSearchGrid',
                store: Ext.data.StoreManager.lookup('profilStore'),
    			columns: [
    				{text: 'Nama', flex: 1, dataIndex: 'properties.nama_areal'},
    				{text: 'Provinsi', flex:1, dataIndex: 'properties.provinsi'},
    				{text: 'Luas', flex: 1, dataIndex: 'properties.luas_sk_fix', hidden: true},
    				{text: 'Skema', flex:1, dataIndex: 'properties.skema'},
    				{text: 'Desa', flex:1, dataIndex: 'properties.desa', hidden: true},
    				{text: 'Jumlah KK', flex:1, dataIndex: 'properties.kk_jumlah'}
    			],
    			listeners: {
    				'itemdblclick': function (dv, record) {
    					console.log(record.data.properties.desa);
    				}
    			}
    		});
    		programStore.on('load', function (records) {
    			if (records.data.items.length != 0) {
    				Ext.getCmp('searchResultWindow').add(grid);
    			};
    		});
    
    
            cqlFilter = 'strToLowerCase(desa) like \'%' + searchKey + '%\' or strToLowerCase(provinsi) like \'%' + searchKey + '%\'';
    		if (searchKey) {
    	        programStore.getProxy().extraParams.cql_filter = cqlFilter;
    	        programStore.load();
    		};
    
    
            Ext.getCmp("searchResultWindow").show();
            
        }
    
    
        Ext.getCmp("tf_quicksearch").on('keypress', function (obj, e) {
            if (e.getKey() === e.ENTER) {
                quickSearch();
            }
            ;
        });
    
    
        Ext.getCmp("btn_quicksearchok").on('click', function (e) {
            quickSearch();
        });
    When I click twice in that row panel, I could see the data in the console. But why the data does not showing up in the grid. Please help me.

    I've read through this post , this. But nothing's work.

    search-box.jpg

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Does the data show in the grid before you filter with the search field? You've confirmed that your server script is returning the filtered set?

Similar Threads

  1. Replies: 1
    Last Post: 14 Oct 2014, 12:35 AM
  2. GridPanel Does not show data, PaginToolBar not refreshing data
    By m_alizd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 Aug 2013, 10:20 PM
  3. EXTJS Gridpanel not show data
    By hentobali in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 2 Mar 2010, 12:52 PM
  4. How to show data in gridpanel from a variable having xml?
    By saadkhan in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 22 Feb 2010, 3:22 AM
  5. New data in Store does not show up in GridPanel, please help.
    By the DtTvB in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 22 Dec 2007, 7:07 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •