顯示具有 折行 標籤的文章。 顯示所有文章
顯示具有 折行 標籤的文章。 顯示所有文章

2023年8月15日 星期二

V120401 - 設定 Query高度 - Query 高度亂掉 - radio - 字折行

 目的: V120401 - 編輯後 - Query 高度亂掉 - radio

處理說明:  1> Query的高度設為固定
                        var Query = new Ext.FormPanel({
                                              id: 's_form',
                                             height:120,
                                             layout: { type: 'hbox', align: 'stretch' },
                  2> 按[存檔]後,重新顯示資料                      
                       Ext.getCmp('btn_save').setFormValue = function () {
                               Ext.getCmp('btn_Show').fireHandler();        
                               return true;        
                         };





 
1>*.js
//篩選條件畫面
    var Query = new Ext.FormPanel({
        id: 's_form',
        height:120,
        layout: { type: 'hbox', align: 'stretch' },
        fieldDefaults: { labelAlign: 'right' },
        defaults: { margin: { top: 3 } },
        items: [
            {
                xtype: 'panel',  id: 'panel1',  layout: { type: 'hbox', align: 'stretch' },   flex: 14,  border: 0,
                items: [
                    {
                        xtype: 'panel',  id: 'panel11',  layout: { type: 'vbox', align: 'stretch' }, flex: 25,   border: 0,
                        items: [cmp_TMNOXX, cmp_DOCNO, cmp_TMNO],
                    },  // end of panel11
                    {
                        xtype: 'panel',  id: 'panel12', layout: { type: 'vbox', align: 'stretch' }, flex: 30, border: 0,
                        items: [cmp_VOL, cmp_STLCT,  cmp_MKDT],                        
                    },   // end of panel12 , flex:16                    
                    {
                        xtype: 'panel',  id: 'panel13', layout: { type: 'vbox', align: 'stretch' },  flex: 20, border: 0,
                        items: [cmp_STAT],
                    },   // end of panel13 , flex:16              
                    {
                        xtype: 'panel', id: 'panel14', layout: { type: 'vbox', align: 'stretch' }, flex: 20, border: 0,
                        items: [cmp_TYPE],
                    },   // end of panel13 , flex:16                               
                    {
                        xtype: 'panel', id: 'panel15', layout: { type: 'vbox', align: 'stretch' }, flex: 20, border: 0,
                        items: [],
                    },   // end of panel13 , flex:16                               
                ]
            },  // end of panel1            
            {
                //xtype: 'toolbar',
                xtype: 'panel',
                id: 'panel2',
                layout: { type: 'vbox', align: 'right' },
                flex: 1,
                border: 0,
                items: [
                    {
                        xtype: 'button',
                        id: 'btn_Show',
                        flex: 2,
                        border: 1,
                        text: '資料顯示',
                        iconCls: 'icon-search',
                        handler: function () {
                            var np = s_JSON('s_form'); //TMFunction.js, 組合form上的查詢條件為json參數傳遞                                                       
                            np["s_STAT"] = Ext.getCmp('s_STAT').getValue();
                            np["s_TYPE"] = Ext.getCmp('s_TYPE').getValue();                            
                            //console.log('1 gridstore: ', gridstore);
                            //var gridstore = Ext.getCmp('grid_Single').store;                            
                            gridstore.getProxy().url = '../api/V120401API/getGridData_M';
                            gridstore.getProxy().extraParams = np; //分頁OK,篩選條件OK                            
                            Ext.getCmp('grid_Single').store.pageSize = 30;
                            Ext.getCmp('grid_Single').reloadGridData();       
                            CHK_PK_OBJ.PK_LIST = [];
                            CHK_PK_OBJ.ALL_LIST = [];                                                        
                        }
                    },  // end of 顯示資料
                    {
                        xtype: 'button',
                        id: 'btn_clear',
                        flex: 2,
                        border: 1,
                        text: '清除條件',
                        iconCls: 'icon-clear',
                        handler: function () {
                            var f = Query.getForm();
                            f.reset();
                        }
                    },  // end of 清除條件                    
                   { xtype: 'label', id: 'label151', flex: 2, border: 0, text: '', },  // end of label                    
                ]  // end of items of [顯示資料][清除條件]
            }   // end of panel2  //顯示按鈕
        ]  // end of  items of Query
    });

    Ext.getCmp('grid_Single').addDocked({
        dockedItems: [{
            items: [Query]
        }]
    });

 //存檔.設定欄位值, 重新顯示資料, 以便畫面顯示正常
    //若沒重新顯示,則 radiobox 間距會加大,  畫面顯示不正常
    Ext.getCmp('btn_save').setFormValue = function () {
        Ext.getCmp('btn_Show').fireHandler();        
        return true;        
    };

 // panel11  
    var cmp_TMNOXX = get_cmp_txt1('技令編號', 's_TMNOXX', 80, 130);    
    var cmp_pick_TMNOXX = get_pick_btn0('挑選技令編號', 's_btn_TMNOXX',
        '../api/V120401API/get_s_TMNOXXPick?isComplete=0',
        ['TMNOXX'], ['s_TMNOXX'], J_pickstore_s_TMNOXX, J_pickcolumns_s_TMNOXX);
    cmp_TMNOXX.items.push(cmp_pick_TMNOXX);
    cmp_TMNOXX.items[0].value = '11P10-6-7';
    // DOCNO
    var cmp_DOCNO = get_cmp_txt1('文件編號', 's_DOCNO', 80, 130);
    var cmp_pick_DOCNO = get_pick_btn0('挑選文件編號', 's_btn_DOCNO',
        '../api/V120401API/get_s_DOCNOPick?isComplete=0',
        ['DOCNO'], ['s_DOCNO'], J_pickstore_s_DOCNO, J_pickcolumns_s_DOCNO);
    cmp_DOCNO.items.push(cmp_pick_DOCNO);
    // TMNO
    var cmp_TMNO = get_cmp_txt1('條碼編號', 's_TMNO', 80, 130);
    var cmp_pick_TMNO = get_pick_btn0('挑選條碼編號', 's_btn_TMNO',
        '../api/V120401API/get_s_TMNOPick?isComplete=0',
        ['TMNO'], ['s_TMNO'], J_pickstore_s_TMNO, J_pickcolumns_s_TMNO);
    cmp_TMNO.items.push(cmp_pick_TMNO);


    //panel12
    // 冊號(VOL)
    var cmp_VOL = get_cmp_txt1('冊號', 's_VOL', 80, 130);
    var cmp_pick_VOL = get_pick_btn0('挑選冊號', 's_btn_VOL',
        '../api/V120401API/get_s_VOLPick?isComplete=0',
        ['VOL'], ['s_VOL'], J_pickstore_s_VOL, J_pickcolumns_s_VOL);
    cmp_VOL.items.push(cmp_pick_VOL);
    //儲位(STLCT)
    var cmp_STLCT = get_cmp_txt1('儲位', 's_STLCT', 80, 130);
    var cmp_pick_STLCT = get_pick_btn0('挑選儲位', 's_btn_STLCT',
        '../api/V120401API/get_s_STLCTPick?isComplete=0',
        ['STLCT'], ['s_STLCT'], J_pickstore_s_STLCT, J_pickcolumns_s_STLCT);
    cmp_STLCT.items.push(cmp_pick_STLCT);
    //建檔日期
    var cmp_MKDT = get_cmp_dt1('建檔日期', 's_MKDT1', 80, 100);
    var cmp_MKDT_lbl = get_cmp_lbl0(" ~ ", 20);
    var cmp_MKDT2 = get_cmp_dt0('s_MKDT2', 100);
    cmp_MKDT.items.push(cmp_MKDT_lbl, cmp_MKDT2);    
    
     // panel13            
    var cmp_STAT = get_cmp_rdgrp1('現況', 's_STAT', 80);    
    var cmp_STAT1 = get_cmp_rd0('全部(不含刪除)', 's_STAT', 50, 'ALL');
    cmp_STAT1.checked = true;
    var cmp_STAT2 = get_cmp_rd0('可借閱', 's_STAT', 50, 'A');
    var cmp_STAT3 = get_cmp_rd0('已借出', 's_STAT', 50, 'B');
    var cmp_STAT4 = get_cmp_rd0('已刪除', 's_STAT', 50, 'Z');
    cmp_STAT.items.push(cmp_STAT1, cmp_STAT2, cmp_STAT3, cmp_STAT4);
    
        
    var cmp_TYPE = get_cmp_rdgrp1('類別', 's_TYPE', 80);
    var cmp_TYPE1 = get_cmp_rd0('全部', 's_TYPE', 50, 'ALL');
    cmp_TYPE1.checked = true;
    var cmp_TYPE2 = get_cmp_rd0('藍圖', 's_TYPE', 50, 'D');
    var cmp_TYPE3 = get_cmp_rd0('技令', 's_TYPE', 50, 'T');    
    cmp_TYPE.items.push(cmp_TYPE1, cmp_TYPE2, cmp_TYPE3);


2>myfunc.js
function get_cmp_chk0(par_caption, par_name, par_l_width, par_value, par_margin) {
    if (checkisnull(par_margin))
        par_margin='0  0  0 0 '
    var rtn_cmp =
    {
        xtype: 'checkbox', boxLabel: par_caption, name: par_name, labelWidth : par_l_width,
        inputValue: par_value,
        margin: par_margin,
        width: '100%',  //避免 radio字折行
    }
    return rtn_cmp;
}

2023年8月14日 星期一

V120401 - radio 文字折行, checkbox

 目的: V120401 - radio 文字折行, checkbox

處理說明: 1>將 radio.width ='100%' 即可



1>*.js
// panel13            
    var cmp_STAT = get_cmp_rdgrp1('現況', 's_STAT', 80);    
    var cmp_STAT1 = get_cmp_rd0('全部(不含刪除)', 's_STAT', 50, 'ALL');
    cmp_STAT1.checked = true;
    var cmp_STAT2 = get_cmp_rd0('可借閱', 's_STAT', 50, 'A');
    var cmp_STAT3 = get_cmp_rd0('已借出', 's_STAT', 50, 'B');
    var cmp_STAT4 = get_cmp_rd0('已刪除', 's_STAT', 50, 'Z');
    cmp_STAT.items.push(cmp_STAT1, cmp_STAT2, cmp_STAT3, cmp_STAT4);
    
2>myfunc.js
//get_cmp_rd0 取得 check 元件 , 加入 rdgrp ,  name: par_name
function get_cmp_rd0(par_caption, par_name, par_l_width, par_value, par_margin) {
    if (checkisnull(par_margin))
        par_margin = '0  0  0 0 '
    var rtn_cmp =
    {
        xtype: 'radiofield', boxLabel: par_caption,
        name: par_name,
        labelWidth: par_l_width,
        inputValue: par_value,
        margin: par_margin,        
        //width: '100%',
        width: 120,
        flex: 20,
    }
    return rtn_cmp;
}