Extjs 3.4 - GridPanel 配置

1 篇文章 0 订阅
  Extjs gridpanel  配置大概有几个比较重要的 
   
    1.Store 数据源 

    2.Columns或cm 定义列渲染 , header 列名 dataIndex 数据索引 render 列渲染方法

    3.ViewConfig.forceFit为true + 父窗体layout为 fit  时 可让girdpanel 自适应宽高   

    eg:

   var gpanel = new Ext.Panel({
            title: "订单查询",
            layout: "fit",
            items: [{
                xtype: "grid",
                sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
                columnLines: true,
                viewConfig: {
                    forceFit: true, 
                    emptyText: '系统中还没有任务'
                },
                bbar: new Ext.PagingToolbar({}),          
                store: new Ext.data.JsonStore({
                    url: "/admin/Order",
                    autoLoad: true,
                    root:"data",
                    fields: ['o_OrderNo', 'o_TicketCount', 'o_PayAmount', 'o_CustomerName', 'o_IdCard', 'o_Telephone', 'o_SaleTime', 'o_Status']

                }),         
                columns: [  { header: "订单号", dataIndex: "o_OrderNo",
                                      width:160, sortable: true },
                            { header: "票数", dataIndex: "o_TicketCount",
                                       width: 160, sortable: true },
                            { header: "金额", dataIndex: "o_PayAmount", 
                                       width: 160, sortable: true },
                            { header: "用户", dataIndex: "o_CustomerName",
                                       width: 160, sortable: true },
                            { header: "身份证", dataIndex: "o_IdCard", 
                                       width: 160, sortable: true },
                            { header: "手机", dataIndex: "o_Telephone",
                                       width: 160, sortable: true },
                            { header: "售票时间", dataIndex: "o_SaleTime", 
                                       width: 160, sortable: true },
                            { header: "状态", dataIndex: "o_Status",
                                       width: 160, sortable: true },
                ]

            }]

        });


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS 3.4 中实现批量图片上传可以通过以下步骤: 1. 创建一个文件上传表单 可以使用 Ext.form.Panel 组件创建一个包含文件上传字段的表单,例如: ``` var formPanel = new Ext.form.Panel({ renderTo: 'upload-form', fileUpload: true, items: [{ xtype: 'filefield', name: 'image', fieldLabel: 'Select an image', labelWidth: 100, allowBlank: false, buttonText: 'Browse...' }] }); ``` 2. 处理上传请求 在表单提交时,需要处理上传请求并将文件发送到服务器。可以使用 Ext.form.action.Submit 类来处理请求,例如: ``` formPanel.getForm().submit({ url: 'upload.php', // 上传文件的服务器端处理脚本 waitMsg: 'Uploading your image...', success: function(form, action) { Ext.Msg.alert('Success', 'Your image was uploaded successfully.'); }, failure: function(form, action) { Ext.Msg.alert('Failed', action.result.msg); } }); ``` 其中,url 参数为上传文件的服务器端处理脚本地址,waitMsg 参数为上传过程中显示的等待消息,success 和 failure 分别为上传成功和失败时的回调函数。 3. 处理上传文件 在服务器端处理上传文件时,可以使用 PHP、Java、Node.js 等语言和框架来实现。以下是一个 PHP 的示例代码: ``` <?php $uploadDir = 'uploads/'; $uploadFile = $uploadDir . basename($_FILES['image']['name']); if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadFile)) { echo json_encode(array('success' => true)); } else { echo json_encode(array('success' => false, 'msg' => 'Failed to upload image.')); } ?> ``` 其中,$uploadDir 为上传文件保存的目录,$uploadFile 为上传文件的完整路径。move_uploaded_file 函数用于将上传的临时文件移动到目标位置。最后,使用 json_encode 函数将上传结果以 JSON 格式返回给客户端。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值