zoukankan      html  css  js  c++  java
  • Extjs combo远程加载数据

    Extjs 使用combo来请求数据:
    在运用该方法的时候可以会遇到下面的问题:
    1、展示的时候数据不能够展示出来解决的方法为:
    • 类当中的属性名称定义错误;
    • reader书写的文字不正确;
    • fields是否书写错误
    代码示例:
    前台代码示例:
    (function(){
        Ext.onReady(function(){
            Ext.regModel('BookInfo',{
                fields:[{
                    name:'bookName'
                }]            
            });        
            var bookStore = Ext.create('Ext.data.Store',{
                model:'BookInfo',
                proxy:{
                    type:'ajax',
                    url:'./learnExtjs/dataJSp/bookSearchServer.jsp',
                    reader:new Ext.data.ArrayReader({
                        model:'BookInfo'
                    })
                }
            });
            //下来列表显示不出来的原因:1、类当中的属性名称定义错误;2、reader书写的文字不正确;3、fields是否书写错误
            //返回的数据格式是否正确
            Ext.create('Ext.form.Panel',{
                title:"Ext.form.field.ComboBox远程数据示例",
                frame:true,
                height:100,
                270,
                renderTo:Ext.getBody(),
                bodyPadding:5,
                defaults:{
                    labelSeparator:':',
                    labelWidth:70,
                    200,
                    labelAlign:'left'
                },
                items:[{
                    xtype:'combobox',
                     listWidth : 240,
                     id:'com',
                    fieldLabel:'书籍列表',
                    listConfig:{
                        loadingText:'正在加载书籍信息',//加载数据的提示信息
                        emptyText:'未找到匹配值'//当值不再列表时的提示信息;
                    },
                    allQuery:'allbook',//查询全部信息的查询字符串;
                //    minChars:3,//下拉列表框自动选择前用户需要输入的最小字符数量
                    queryDelay:300,//查询延迟时间
                    queryParam:'searchbook',//查询参数
                    triggerAction:'all',//单击触发按钮显示全部数据
                    store:bookStore,//设置数据源
                    displayField:'bookName',
                    valueField:'bookName'
                //    queryNode:'remote'//数据加载模式远程加载
                }]
            });
        });
            
          var store = Ext.create('Ext.data.Store', {
            fields : ['cid''cname'],
            data : [{
                    cid : '1',
                    cname : '南京市'
                }, {
                    cid : '2',
                    cname : '无锡市'
                }, {
                    cid : '3',
                    cname : '苏州市'
            }]
        });
        var comboBox = new Ext.form.ComboBox({
            renderTo : Ext.getBody(),
            triggerAction : 'all',
            store : store,
            displayField : 'cname',
            valueField : 'cid',
            queryMode : 'local',
            emptyText : '请选择城市'
        });
        var btn = new Ext.button.Button({
            text : '列表框的值',
            renderTo : Ext.getBody(),
            handler : function() {
            Ext.Msg.alert("值""实际值:" + comboBox.getValue()
            + ",显示值:" + comboBox.getRawValue());
            }
        });
    })();
    jsp代码示例:
    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%
        String bookName = request.getParameter("searchbook");
        String java = "['java编程思想'],['java入门'],['javascript程序设计']";
        String cpp = "['c++编程思想'],['c++入门'],['C++程序设计']";
        String php = "['php程序设计'],['php入门'],['php从入门到精通']";
        String books = "";
        if(bookName.equals("allbook")){
            books = "["+java+","+cpp+"]";
            response.getWriter().write(books);
            return ;
        }else{
            bookName = bookName.substring(0,3);
            System.out.println(bookName);
            if(bookName.equals("jav")){
                books = "[{"bookName":"java编程思想"}]";
            }else if(bookName.equals("c++")){
                books = "["+cpp+"]";
            }else if(bookName.equals("php")){
                books = "["+php+"]";
            }else{
                books = "[['没有数据']]";
            }
            response.getWriter().write(books);
        }
    %>





  • 相关阅读:
    Leetcode: Find Median from Data Stream
    Leetcode: Flip Game II
    Leetcode: Flip Game
    Leetcode: Nim Game
    Leetcode: Word Pattern II
    Leetcode: Word Pattern
    Leetcode: Game of Life
    Leetcode: Alien Dictionary && Summary: Topological Sort
    Leetcode: Unique Word Abbreviation
    Leetcode: Find the Duplicate Number
  • 原文地址:https://www.cnblogs.com/babyhhcsy/p/3877677.html
Copyright © 2011-2022 走看看