Extjs 使用点滴

于 2013-01-25 16:03:00 发布
阅读量72 收藏
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/xust/articles/2876832.html
版权 
1. onRender: function (cmp, eOpts) {
        this.getStudentStore().load();
    },

function (cmp, eOpts) 可以写成 function () 
但 function () 不会用到 参数

2. { xtype: ''numberfield'', name: ''printNum'', fieldLabel: ''打印次数'', allowBlank: false, minValue: 0,value:0 }
xtype: ''numberfield'' 如果设置了 默认值 value:0，则 其相应的 model.js 文件中必须 以type:''int'' 来提交，
如果提交的时候 要以type:''string'' 来提交，则不要设置其 默认值。

3. Ext.widget(''listband'');  Ext.widget 只能获取可视化控件

4. controller = this.getController(''listinstallfee''); 
   controller.init();
controller  初始化
与 Ext.application({
    name: ''SysInstallFee'',
    appFolder: ''/Js/AppSys/SysInstallFee/app'',
    autoCreateViewport: true,
    controllers: [
        ''Category'',
        ''InstallFee''
    ]
}); 初始化 相同

this.getController(''listinstallfee'') 获取 Controller 的一个实例

5. 在 Extjs 中经常会遇到 Id 的问题，如： listModule gridpanel
 这样会把所有的 listModule 下面的 gridpanel 的控件查找出来，
返回值是gridpanel 数组，经常会引发事件的联动响应问题。应注意。。。

6. fields: [
        { name: ''createDate'', type: ''date'', dateFormat: ''c'' }
    ],

dateFormat: ''c'' 将日期转化为 中国时间
7. { xtype: ''datefield'', name: ''modifyDate'', fieldLabel: ''修改时间'', disabled: true, format: ''Y-m-d'' }
xtype: ''datefield'' 类型，如果加上 readOnly:true 属性 则显示普通文本框的样式，
否则显示日期控件的样式。

8. Uncaught TypeError: Cannot call method ''on'' of undefined
var listGridDetail = Ext.create(''Ext.grid.Panel'', {

一般就是由于 store 未正确加载或找不到该 store 的引用

9. var billForm = Ext.create(''Ext.form.Panel'', {
            region: ''north'',
            id: ''orderMainForm'',
            //title: ''基本信息'', //去掉form的标题，同时在UI上不显示标题栏

10. 控件一旦设置了 Disabled = true 之后，该控件就被禁用了，因此注意：当取值的时候也就取不到值了。
11. this.getDeliveryGoodsStore().rejectChanges(); 
    //或 Ext.StoreMgr.lookup("DeliveryGoods").rejectChanges();
    //或 Ext.data.StoreManager.lookup("DeliveryGoods").rejectChanges();
 以上三种写法都支持 4.0.7 撤销数据源的所有修改
12. //循环数据源
        this.getImpBalanceGoodsStore().each(function (item) {
            outerDetailIds += item.get("outerDetailId") + ",";
        });
13. var mRecord = this.getImpBalanceGoodsStore().findRecord(''outerDetailId'', outerDetailId);
14. combobox 的数据源加载问题，在 combobox 默认只会在第一次展开的时候会请求数据源
15. extjs 有的时候后台在调试的时候，extjs 前台UI不会刷新数据源，因为请求在调试的时候会中断。
    会导致调试的时候，看到的数据有可能是不是当前更新的最新数据。
16. Cannot call method ''substring'' of undefined 可能是找不到相应的控件引起这个问题。
17. var isGiftSimpleStore = Ext.create(''Ext.data.Store'', {
    fields: [''abbr'', ''name''],
    data: [
        { "abbr": false, "name": "否" },
        { "abbr": true, "name": "是" },
    ]
});

var combo_isGift = {
    columnWidth: 1 / 3,
    id: ''isGift'',
    name: ''isGift'',
    xtype: ''combobox'',
    fieldLabel: ''是否赠品<font color="red">*</font>'',
    blankText: ''是否赠品不能为空'',
    editable: false,
    allowBlank: false,
    store: isGiftSimpleStore,
    queryMode: ''local'',
    displayField: ''name'',
    valueField: ''abbr'',
    value: false //默认选择项
};

//数值
        var billTypeSimpleStore = Ext.create(''Ext.data.Store'', {
            fields: [''abbr'', ''name''],
            data: [
                { abbr: 0, name: ''连锁调拨出货'' },
                { abbr: 1, name: ''连锁调拨退货'' }
            ]
        });

        var combo_billType = {
            columnWidth: 1 / 3,
            id: ''combo_billType'',
            name: ''billType'',
            xtype: ''combobox'',
            fieldLabel: ''单据类型<font color="red">*</font>'',
            blankText: ''单据类型不能为空'',
            allowBlank: false,
            editable: false,
            store: billTypeSimpleStore,
            queryMode: ''local'',
            displayField: ''name'',
            valueField: ''abbr'',
            value: 0
        };

18. 验证用的是表单的提交：
mMainForm.submit 

提交数据到后台用的是model的提交：
this.activeRecord.save
active.destroy
19. 
<a>. //set activeRecordExpenseClaimDetail
            var mForm = Ext.getCmp(''expenseclaimdetailMainForm'');
            var mNewRecord = new AcnExpenseClaim.model.ExpenseClaimDetail();
            //mNewRecord.set(mForm.getValues());
            mForm.getForm().updateRecord(mNewRecord); //将form中的数据放到model中去

<b>.var mNewRecord = new PurDelivery.model.DeliveryGoods();
        //mNewRecord.set(''isValid'', true);
        //mNewRecord.set(''isDel'', false);
        Ext.getCmp(''hd_orderId'').setValue(this.activeRecord.data.purchaseId);
        Ext.getCmp(''orderDocNo'').setValue(this.activeRecord.data.purchaseDocNo);

        mNewRecord.set(''deliveryId'', Ext.getCmp(''PID'').getValue());
        //将form中的值反映到 model
        mMainFormDetail.getForm().updateRecord(mNewRecord);
        mStore.add(mNewRecord);
解释：
//只是将赋值给控件,并没有将值赋值给model，而form 绑定的是model，所以不会将最新值反映到form中显示出来，
//要加上 mMainFormDetail.getForm().updateRecord(mNewRecord); 强值将最新值反应到model，从而反映到form中显示出来
//结论：值 -> model -> form绑定
Ext.getCmp(''orderDocNo'').setValue(this.activeRecord.data.purchaseDocNo);


20. 数据源加载完成后再执行后续代码

            this.getDictGoodsPriceStore().load({
                callback: function (records, operation, success) {
                    Ext.getCmp(''winExpSpecialGoods'').getForm().loadRecord(record);
                    Ext.getCmp(''expSpecialGoodsMainForm'').show();
                },
                scope: this
            });
21. 级联
//第一个combo 值发生改变的时候改变第二个combo的数据源
    doSelect_comboGrid_warehouseId: function (me, record, index, eOpts) {
        Ext.getCmp(''hd_warehouseId'').setValue(record.data.id);

        Ext.getCmp(''comboGrid_warehouseLocId'').setValue('''');
        var mStore = this.getDictWarehouseLocStore();

        var mProxy = mStore.getProxy();
        var extraParamsObj = new Object();
        extraParamsObj.warehouseId = record.data.id;
        mProxy.extraParams = extraParamsObj;
        mStore.load();
    },
//数据源加载前把级联条件带进去
    onDictWarehouseLocStoreBeforeLoad: function (store, operation, eOpts) {
        var extraParamsObj = new Object();
        var WarehouseId = Ext.getCmp(''hd_warehouseId'').getValue();
        if (WarehouseId) {
            extraParamsObj.WarehouseId = WarehouseId;
        }
        store.getProxy().extraParams = extraParamsObj;
    },

22. extjs 统计行

            ////begin 追加统计行到store 后面
            //output = output.Substring(0, output.Length - 1); //去掉‘]’
            //RptRequirementTrace mEmptyRow = new RptRequirementTrace();
            //RptRequirementTrace mTotalRow = new RptRequirementTrace();
            //mTotalRow.requirementQuantity = 107;
            //var outputEmptyRow = JsonConvert.SerializeObject(mEmptyRow, new IsoDateTimeConverter());
            //var outputTotalRow = JsonConvert.SerializeObject(mTotalRow, new IsoDateTimeConverter());

            //output = output + "," + outputEmptyRow;
            //output = output + "," + outputTotalRow;
            //output = output + "]";
            ////end 追加统计行到store 后面

23. 解决 统计行的 显示 ‘合计：’字样问题，

        
        //行号
        function summaryRendererRowNo(value, metaData, record, rowIndex, colIndex, store, view) {
            if (rowIndex + 1 == store.getCount()) {
                return "";
            } else {
                metaData.style = ''background-color:#ECECEC;'';
            }
            return rowIndex + 1;
        }
        //合计
        function summaryRendererWithText(value, metaData, record, rowIndex, colIndex, store, view) {
            if (rowIndex + 1 == store.getCount())
                return "<span style=''color:black;font-weight:bold;''>合计：</span>";
            return value;
        }
        //合计项(千分号显示)
        function summaryRenderer(value, metaData, record, rowIndex, colIndex, store, view) {
            if (rowIndex + 1 == store.getCount())
                return "<span style=''color:black;font-weight:bold;''>" + Ext.util.Format.number(value, ''0,000.00''); +"</span>";
            return Ext.util.Format.number(value, ''0,000.00'');
        }

//列表记录Grid
        var checkboxModel = Ext.create(''Ext.selection.CheckboxModel'', { checkOnly: false });
        var listGrid = Ext.create(''Ext.grid.Panel'', {
            id: ''requirementtraceMainGrid'',
            margin: ''5px 5px 5px 5px'',
            //selModel: checkboxModel,
            store: ''RptRequirementTrace'',
            dockedItems: [{
                xtype: ''pagingtoolbar'',
                store: ''RptRequirementTrace'',
                dock: ''bottom'',
                displayInfo: true
            }],
            tbar: [{
                text: ''图形显示'',
                scale: ''medium''
            }, {
                text: ''导出'',
                scale: ''medium''
            }, {
                text: ''打印'',
                scale: ''medium''
            }],
            columns: [
                { xtype: ''rownumberer'', header: ''序号'', width: 40, align: ''center'', titleAlign: ''left'', renderer: summaryRendererRowNo },
                { xtype: ''datecolumn'', header: ''请购日期'', dataIndex: ''requirementDate'', width: 120, format: ''Y-m-d'' },
                { header: ''请购订单号'', dataIndex: ''docNo'', width: 100 },
                { header: ''供应商名称'', dataIndex: ''supplierName'', width: 100 },
                { header: ''采购员'', dataIndex: ''buyerName'', width: 100 },
                { header: ''商品编码'', dataIndex: ''goodsCode'', width: 100 },
                { header: ''商品名称'', dataIndex: ''goodsName'', width: 100 },
                { header: ''商品规格'', dataIndex: ''goodsSpec'', width: 100 },
                { header: ''等级'', dataIndex: ''goodsLevelName'', width: 100 },
                { header: ''色号或坑距'', dataIndex: ''colorNo'', width: 100 },
                { header: ''单位'', dataIndex: ''unit'', width: 100, renderer: summaryRendererWithText },
                { header: ''请购数量'', dataIndex: ''requirementQuantity'', width: 100, align: ''right'', titleAlign: ''left'', renderer: summaryRenderer },
                { header: ''采购数量'', dataIndex: ''purchaseQuantity'', width: 100, align: ''right'', titleAlign: ''left'', renderer: summaryRenderer },
                { header: ''厂家发货数量'', dataIndex: ''deliveryQuantity'', width: 100, align: ''right'', titleAlign: ''left'', renderer: summaryRenderer },
                { header: ''估价入库数量'', dataIndex: ''impEvaluateQuantity'', width: 100, align: ''right'', titleAlign: ''left'', renderer: summaryRenderer },
                { header: ''未到货数量'', dataIndex: ''nonarrivalQuantity'', width: 100, align: ''right'', titleAlign: ''left'', renderer: summaryRenderer }
            ]
        });

解决 ''千分号'' 显示问题：
grid下的 columns中 xtype:''numbercolumn''，format:''0,000.00'' 
总是显示 123.456,78 而不是 123,456.00
原因：Ext.util.Format.number 类源代码 中的 
thousandSeparator: '','',
decimalSeparator: ''.'', 
与 本地文件 ext-lang-zh_CN.js

if (Ext.util.Format) {
Ext.apply(Ext.util.Format, {
thousandSeparator: ''.'',
decimalSeparator: '','',
发生冲突

24.  Ext.Ajax.request 请求
// 准备新数据
        var mNewRecord = new AcnReceive.model.Receive();
        mNewRecord.set(''openDate'', new Date());

        Ext.Ajax.request({
            url: ''/AcnReceive/GetCurrentOperatorDeptName'',
            method: ''post'',
            success: function (response) {
                var deptName = response.responseText.deptName;
                mNewRecord.set(''openDepartmentName'', deptName);
            }
        });

 

转载于:https://www.cnblogs.com/xust/articles/2876832.html

weixin_30419799
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值