zoukankan      html  css  js  c++  java
  • ExtJS练手

     
    
    Ext.onReady(function () {
    
    //给grid添加数据源
    var store = new Ext.data.JsonStore({
    root: 'rows',
    totalProperty: 'total',
    url: 'RareWords.aspx?opt=init',
    fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE']
    });
    
    function createStore(url) {
    return new Ext.data.JsonStore({
    root: 'rows',
    totalProperty: 'total',
    url: url,
    fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE']
    });
    }
    
    //分页工具栏
    var p = new Ext.PagingToolbar({
    store: store
    , pageSize: 20
    , autoWidth: true
    , displayInfo: true
    , displayMsg: '第{0}条到{1}条,一共{2}条'
    , emptyMsg: '没有记录'
    });
    //列名
    var columns = new Ext.grid.ColumnModel([
    {
    header: '编号',
    sortable: true, //设置这个属性进行排序 
    dataIndex: 'RWLID',
     80
    }, {
    header: '生僻字',
    sortable: true, //设置这个属性进行排序 
    dataIndex: 'RWLNAME',
     80
    }, {
    header: '部首',
    sortable: true, //设置这个属性进行排序 
    dataIndex: 'CHARACTERS',
     80
    }, {
    header: '读音',
    sortable: true, //设置这个属性进行排序 
    dataIndex: 'PRONUNCE',
    grid 80
    }
    ]);
    //创建一个Grid
    var grid = new Ext.grid.GridPanel({
    cm: columns
    , loadMask: { msg: '正在加载页面,请稍候...' }
    // ,  document.documentElement.clientWidth - 8
    // , height: document.documentElement.clientHeight - 5
    ,  600
    , height: 600
    , autoScroll: true
    , collapsible: false
    , animCollapse: false
    , enableHdMenu: false
    , title: '生僻字'
    , renderTo: 'RareWords'
    , store: store
    , bbar: p
    , tbar: [{ text: '新增', id: 'btn_add', handler: Add, iconCls: 'newIcon' }, //添加一个生僻字
    '-',
    { text: '修改', id: 'btn_sub', handler: Modify, iconCls: 'modIcon' }, //修改生僻字
    '-',
    { text: '删除', id: 'btn_del', handler: Delete, iconCls: 'delIcon' },
    '->',
    { xtype: 'tbtext', text: '部首:' },
    { xtype: 'textfield', id: 'Characters' },
    '-',
    { xtype: 'tbtext', text: '读音:' },
    { xtype: 'textfield', id: 'Prounce' },
    '-',
    { text: '查询', handler: Search, iconCls: 'search' }
    
    ]
    });
    
    //按部首、读音查询
    function Search() {
    var opt = 'Search';
    var characters = Ext.getCmp('Characters').getValue();
    var prounce = Ext.getCmp('Prounce').getValue();
    //escape
    var receive_url = 'RareWords.aspx?opt=' + opt + '&Characters=' + escape(characters) + '&Pronunce=' + escape(prounce);
    
    store = createStore(receive_url);
    store.reload({ params: { start: 0, limit: 20} });
    grid.reconfigure(store, grid.getColumnModel());
    
    $('#dialog input').val('');
    };
    //初始化数据
    query();
    function query() {
    grid.getStore().reload({ params: { start: 0, limit: 20} });
    grid.reconfigure(grid.getStore(), grid.getColumnModel());
    };
    //定义全局变量
    var ID;
    var opt = '';
    //生僻字弹出层
    $('#dialog').dialog({
    autoOpen: false,
     400,
    height: 250,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 400,
    maxHeight: 400,
    title: '生僻字',
    modal: true,
    buttons: {
    "确定": function () {
    var RWLNAME = $('#RWLNAME').val();
    var CHARACTERS = $('#CHARACTERS').val();
    var PRONUNCE = $('#PRONUNCE').val();
    
    var rnt = requestUrl('RareWords.aspx', { opt: opt, RwlId: ID, RwlName: RWLNAME, Characters: CHARACTERS, Pronunce: PRONUNCE });
    $(this).dialog('close');
    grid.getStore().reload({ params: { start: 0, limit: 20} });
    Ext.Msg.alert('提示', rnt);
    },
    "关闭": function () {
    $(this).dialog('close');
    }
    }
    });
    
    //新增生僻字
    function Add() {
    //打开遮层
    opt = 'Add';
    $('#dialog input').val('');
    $('#dialog').dialog('open');
    };
    
    //修改生僻字
    function Modify() {
    //选中一条记录
    var rows = grid.getSelectionModel().getSelections();
    if (rows.length == 0) { alert('请至少选择一条记录'); return; }
    opt = 'Update';
    $('#dialog').dialog('open');
    var RWLID = rows[0].get('RWLID');
    var RWLNAME = rows[0].get('RWLNAME');
    var CHARACTERS = rows[0].get('CHARACTERS');
    var PRONUNCE = rows[0].get('PRONUNCE');
    $('#RWLNAME').val(RWLNAME);
    $('#CHARACTERS').val(CHARACTERS);
    $('#PRONUNCE').val(PRONUNCE);
    ID = RWLID;
    };
    
    //删除生僻字
    function Delete() {
    //选中一条记录
    var rows = grid.getSelectionModel().getSelections();
    if (rows.length == 0) { alert('请至少选择一条记录'); return; }
    var RWLID = rows[0].get('RWLID');
    var opt = 'Delete';
    var receive_url = 'RareWords.aspx';
    var data = { 'opt': opt, 'RwlId': RWLID };
    if (confirm('你确定要删除吗?')) {
    $.ajax({
    url: receive_url,
    async: false,
    data: data,
    success: function () {
    //删除之后更新页面数据
    grid.getStore().reload({ params: { start: 0, limit: 20} });
    }
    });
    }
    };
    
    });
    
     
    
     
      
  • 相关阅读:
    Java如何实现跨平台?
    Javascript的对象再认识
    说说javacsript的函数
    setTimeout() 与setInterval()
    datepicker 插件
    table中,表头固定,body滚动的方式。也就是使用:css Table布局-display:table
    jgrid的相关知识
    学习笔记
    ES6 — 箭头函数
    受控组件
  • 原文地址:https://www.cnblogs.com/siyunianhua/p/3436383.html
Copyright © 2011-2022 走看看