专栏首页hbbliyongExtjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

1.extjs 给怎么给panel设背景色

设置bodyStyle:'background:#ffc;padding:10px;',

var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: 'Results',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    bodyStyle: 'background:#ffc; padding:10px;',
    layout: {
        type: 'vbox',       // Arrange child items vertically
        align: 'stretch',    // Each takes up full width
        padding: 5
    },
    items: [{               // Results grid specified as a config object with an xtype of 'grid'
        xtype: 'grid',
        columns: [{header: 'Column One'}],            // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
        flex: 1                                       // Use 1/3 of Container's height (hint to Box layout)
    }, {
        xtype: 'splitter'   // A splitter between the two child items
    }, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').
        title: 'Details',
        bodyPadding: 10,
        items: [{
            fieldLabel: 'Data item',
            xtype: 'textfield'
        }], // An array of form fields
        flex: 2             // Use 2/3 of Container's height (hint to Box layout)
    }]
});

2. Extjs4.0 设置 Ext.data.Store 传参的请求方式

var Store = Ext.create('Ext.data.Store', {  
    pageSize: pageSize,  
    model: 'Ext.data.Model名称',  
    autoLoad: false,  
    proxy: {  
        type: 'ajax',  
        url: '请求路径',  
        getMethod: function(){ return 'POST'; },//亮点,设置请求方式,默认为GET  
        reader: {  
            type: 'json',  
            root: 'Data',  
            totalProperty: 'totalCount'  
        }  
    },   
    listeners: {  
        'beforeload': function (store, op, options) {  
            var params = {  
                //参数  
            };  
            Ext.apply(store.proxy.extraParams, params);   
        }  
    }  
});  

3.ExtJS grid 带参数查询分页 store 传额外参数解决办法

在store的beforeload事件里面重写store.proxy.extraParams,添加新参数

就不必每次都手动的添加参数

store.on('beforeload', function (store, options) {
        var new_params = { name: Ext.getCmp('search').getValue() };
        Ext.apply(store.proxy.extraParams, new_params);
        // alert('beforeload');
    });
在Extjs3 中的
store.on('beforeload', function () {
            store.baseParams = {
                name: '5555555',
                intss: '666666666'
            };
        }); 

下面给出完整的代码。原理很简单,将搜索条件放在store的baseParams中,每次加载都赋值。

只是需要强制赋值,因为默认的pagetoolbar只会把start、limit、page、sort、dir传递给store。

var store = new Ext.data.Store({  
       pageSize: GridPageSize,  
       model: 'Master',  
       autoLoad: false,   
       proxy: {  
           type: 'ajax',  
           url: '/master/GetMasterData',  
           reader: {  
               type: 'json',  
               root: 'data',  
               totalProperty: 'totalCount'  
           }  
       },  
       fields: [  
           { name: 'Id' },  
           { name: 'Master_Name' }  
           
       //排序  
       sorters: [{  
           property: 'Master_Name',  
           direction: 'DESC'  
       }]   
        
   });  
store.on('beforeload', function (store, options) {  
        var new_params = { name: Ext.getCmp('search').getValue() };  
        Ext.apply(store.proxy.extraParams, new_params);  
        // alert('beforeload');  
    });  
store.load({  
       params: { start: 0, limit: GridPageSize }  
   })  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ExtJS中xtype一览

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带...

    hbbliyong
  • 依赖注入(IOC)

    背景介绍 在设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系,变依赖具体为依赖抽象。平时开发中如果发现客户程序依赖某个或某类对象,我们常常会对他...

    hbbliyong
  • 对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化

         对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器...

    hbbliyong
  • Hacking with iOS: SwiftUI Edition - 纸杯蛋糕项目(一)

    在此项目中,我们将构建一个用于订购蛋糕的多屏应用。这将使用两种形式,这对您来说是个老新闻,但您还将学习如何在具有@Published属性的情况下使类符合Coda...

    韦弦zhy
  • cssjshtml vue.js 多个vue实例

    葫芦
  • Linux基础知识第四讲,文件内容命令

    cat 跟 more 命令 cat 123.txt more 123.txt 在123.txt内容不多的情况下,一样显示. 如果123.txt文件内容.超...

    IBinary
  • COVID-19数据分析实战:数据清洗篇

    2020 年全球的关键词非COVID19 莫属。虽然现在关于病毒的起源众说纷纭,也引起了不小的外交冲突。作为数据爱好者,还是用数据说话比较靠谱。

    统计学家
  • 对以太坊的优雅介绍

    重要提示:如果您拥有价值超过1,000美元的加密货币,那么您肯定应该使用硬件钱包,而不是在交易所保留硬币。我推荐Trezor,您可以直接从他们的网站购买€89 ...

    天空
  • Filebeat自定义pipeline,完美处理自定义日志字段

    filebeat是本地文件日志数据采集器,通常用作ELK中的日志采集,将采集的日志数据传输到elasticsearch,当需要进行数据处理时,先传入logsta...

    李俊鹏
  • 恶意爬虫让机票价格暴涨 每年或致航空公司损失十多亿元

    十一假期来临前,在北京市宣布公共卫生应急响应级别调至二级后。多家OTA网站当日数据显示:消息公布的1个小时内,北京出发的机票预订量较上一时段暴涨15倍,北京进出...

    问题先森

扫码关注云+社区

领取腾讯云代金券