Extjs5项目进行中:打开新面板并加载数据(三)

  废话不多说,上代码:

  Application结构:

  

view代码:  

Ext.define(‘Lz.view.Systems.PageManagerView‘, {
  extend: ‘Ext.grid.Panel‘,
  xtype: ‘PageView‘,
  store: ‘Systems.PageStore‘,
  closable: true,//右上角关闭按钮
  closeAction: ‘destroy‘,//销毁关闭后的缓存
  forceFit: true,//自适应
  tbar: [
    { text: ‘新 增‘, action: ‘Add‘ },
    { text: ‘修 改‘, action: ‘modify‘ },
    { text: ‘删 除‘, action: ‘delete‘ },
    ‘->‘,
    {
      xtype: ‘textfield‘,
      fieldLabel: ‘菜单名称‘,
      labelAlign: ‘right‘,
      id: ‘txtId‘
    }, {
      xtype: ‘button‘,
      text: ‘查 询‘,
      action: ‘seatch‘
    }],
    columns: [
      { xtype: ‘rownumberer‘ },
      { text: ‘菜单名称‘, dataIndex: ‘page_name‘ },
      { text: ‘URL‘, dataIndex: ‘page_url‘ },
      { text: ‘排序‘, dataIndex: ‘order‘ },
      {
        text: ‘状态‘, dataIndex: ‘state‘, renderer: function (value) {
          if (value == 0) {
            return ‘启用‘;
          } else {
            return ‘停用‘;
          }
        }
      },
      { text: ‘备注‘, dataIndex: ‘note‘ }
    ],
    dockedItems: [{
      xtype: ‘pagingtoolbar‘,
      store: ‘Systems.PageStore‘,
      dock: ‘bottom‘,
      displayInfo: true,//显示右下角汇总数据
      displayMsg: ‘显示第{0}-{1}条记录,一共{2}条记录‘,
      emptyMsg:‘没有记录‘

    }],
  initComponent: function () {
    this.callParent(arguments);
    this.store.load();
  }
});

store代码:

Ext.define(‘Lz.store.Systems.PageStore‘, {
  extend: ‘Ext.data.Store‘,
  model: ‘Lz.model.Systems.lg_sys_page_info‘,
  storeId: ‘pageStores‘,
  pageSize: 20,
  proxy: {
    type: ‘ajax‘,
    url: ‘/WebService/Systems/SystemPageInfo.asmx/GetPageInfoForId‘,
    actionMethods: Ext.apply({}, { "read": "POST" }, Ext.data.proxy.Ajax.prototype.actionMethods),
    reader: {
      type: ‘json‘,
      rootProperty: ‘Rows‘,//注意,这里在4.2版本是root
      totalProperty: ‘Total‘
    }
  },
  autoLoad: false
});

model代码:

Ext.define(‘Lz.model.Systems.lg_sys_page_info‘, {
  extend: ‘Ext.data.Model‘,
  fields: [
    { name: ‘page_id‘, type: ‘string‘ },
    { name: ‘page_name‘, type: ‘string‘ },
    { name: ‘page_url‘, type: ‘string‘ },
    { name: ‘order‘, type: ‘integer‘ },
    { name: ‘state‘, type: ‘integer‘ },
    { name: ‘note‘, type: ‘string‘ }
  ]

});

controller代码:

Ext.define(‘Lz.controller.Systems.pageController‘, {
  extend: ‘Ext.app.Controller‘,
  views: [‘Systems.PageManagerView‘,‘Viewform.Pageform‘],
  stores: [‘Systems.PageStore‘],
  models: [‘Systems.lg_sys_page_info‘],
  init: function () {
    this.control({
      ‘PageView> toolbar button[action=Add]‘: {
        click: function () {
          Ext.Loader.setConfig({
            enabled: true
          });
          var form = new Lz.view.Viewform.Pageform();
          openWindow(form,400,250,‘添加菜单‘);

        }
      }
    });
  }
});

打开页面代码:

var Niwar = new Object();
Niwar.openWindow = function (winTitle, item, winWidth, winButton, config) {

  Ext.create(‘Ext.window.Window‘, {
    autoShow: true,
    closable: true,
    modal: true,
    resizable: false,
    title: winTitle,
    buttons: winButton,
    width: winWidth || 280,
    items: typeof (item) == ‘string‘ ? Ext.create(item, config) : item
  });

}

时间: 2024-10-26 09:41:04

Extjs5项目进行中:打开新面板并加载数据(三)的相关文章

asp.net中打开新窗口的多种方法(转载)

asp.net中打开新窗口的多种方法 1.Response.Redirect("XXX.aspx",true)——直接转向新的页面,原窗口被代替; 2. Response.Write("<script>window.open(XXX.aspx'',''_blank'')</script>")——原窗口保留,另外新增一个新页面; 3.Response.Write("<script>window.location=XXX.a

Web设计中打开新页面或页面跳转的方法 js跳转页面

Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;)

如何在CAD中打开功能面板?

如何在CAD中打开功能面板?就是在刚刚接触到CAD的小伙伴们来对,CAD还是一个比较难的东西,开始操作起来就是一头雾水,什么也不知道,但是CAD中日常的工作就是绘制图形,当我们使用CAD编辑器来绘制图形的时候,总是一步一步的点击上方属性栏总是很麻烦,拿如何在CAD中打开功能面板?具体要怎么来操作了,今天就教教大家怎么在迅捷CAD编辑器中打开功能面板,想要了解的朋友就一起来看看具体操作步骤吧! 第一步:首先打开电脑桌面中任意的一个浏览器,在浏览器的搜索框中搜索迅捷CAD编辑器标准版,然后点击进入官

Android中ListView分页加载数据

熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们今天就要讲一讲列表组件ListView加载数据的相关内容.通常来说,一个应用在展现大量数据时,不会将全部的可用数据都呈现给用户,因为这不管对于服务端还是客户端来说都是不小的压力,因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.比如:微博客户端可能会在用户滑动至列表底端时自动加载下一页数据,也可能在底部放置一个“加载更多”按钮,用户点击后,加载

ArcGIS Engine中加载数据

ArcGIS Engine中加载数据 http://blog.csdn.net/gisstar/article/details/4206822 分类: AE开发积累2009-05-21 16:491118人阅读评论(0)收藏举报 database数据库serveruser工作class 1.加载Shapefile数据 1 IWorkspaceFactory pWorkspaceFactory;2 IFeatureWorkspace pFeatureWorkspace;3 IFeatureLaye

smarty中增加类似foreach的功能自动加载数据方法

第一步:在Smarty_Compiler.class.php的_compile_tag函数中增加: 复制代码 代码如下: //加载数据的开始标签case 'load': $this->_push_tag('load'); return $this->_complie_load_start($tag_args); break;//加载数据的结束标签case '/load': $this->_pop_tag('load'); return "<php endforeach;

Android 下分批加载数据以及listView使用过程中的优化

需求:在开发过程中,listview加载的数据如果比较大,这时为了提高用户体验感,我们应该事先分批加载以及下拉刷新功能 1.首先,数据访问层需要提供分批加载功能的接口, 代码如下: package com.zaizai.safty.db.dao; import android.content.ContentValues; import android.content.Context; import android.database.Cursor; import android.database.

MVC通过JsonResult返回Json数据,然后在视图页面中通过@Html.Partial()方法加载分部视图

首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } public string Name { get; set; } public string Sex { get; set; } public int Age { get; set; } } 然后新建一个Student控制器: using JsonDataWithMVC.Models; using Sy

thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sql并初始化select数据. 项目地址: github gitee 简介 thymeleaf-extras-db是针对thymeleaf的扩展,主要是简化前端select标签数据的获取,让select标签直接从数据库加载数据,而不需要单独写接口,支持缓存. 导入 <dependency> <